时间戳

首页 > 解决方案 > 如何在单击按钮时向左滑动图像和滑入文本

html - 如何在单击按钮时向左滑动图像和滑入文本

问题描述

我是网页设计方面的新手。

我将图像居中，在其下方放置了一个按钮，当我单击此按钮时，图像下方会出现一些文本。当我再次单击按钮时，文本向上，因此我们看到初始视图：只有图像和按钮（类似于此处的效果https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp）。

<div class="container">
  <h2>Simple Collapsible</h2>
  <p>Click on the button to toggle between showing and hiding content.</p>
  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

现在，我不想让这个文本出现在图像下方，我希望图像向左移动，并且在单击该按钮时文本出现在图像之前的位置，甚至在右侧多一点，但仍然在同一条线上。

有人可以帮我这样做吗？谢谢！

标签： htmlbootstrap-4

解决方案

Bootstrap 没有预制方法来做你想做的事，你不能调整collapse方法来做。

但是，您可以在 Bootstrap 网格系统中轻松完成您想要做的事情 - 而不是使用预制的 Bootstrap 工具。

这可能是这样的：

$('.btn').click(function(){
   $('.imgDiv').animate({
      width: '0px'
   },1000, function(){
     $('img').css('width','0px');
   });
   $('.txtDiv').animate({
    width: '90vw',
    marginLeft: '10vw'
   },1000, function(){
      $(this).removeClass('hidden');
   });
});
.full-width {width:100vw;}
.imgDiv{min-height:110px;}

/* max-height required so zero-width does not auto-expand height */
.hidden{width:0px;max-height:100px;overflow:hidden;}
<div class="container">

  <div class="row flex-nowrap">
    <div class="imgDiv text-center full-width">
      <img src="http://placekitten.com/100/100" />
    </div><!-- .imgDiv -->
    <div class="txtDiv hidden">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div><!-- .txtDiv -->
  </div><!-- .row -->
  
  <div class="row d-flex justify-content-center">
    <button type="button" class="btn btn-primary">Show Text</button>
  </div><!-- .row -->
  
</div><!-- .container -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

因为 Bootstrap4 是建立在 flexbox 之上的（事实上，整个 Bootstrap 网格都是围绕 Bootstrap4 中的 flexbox 重新设计的），所以了解一些Bootstrap flexbox 类是很重要的。

Bootstrap 将整个平台从 Bootstrap3 重新设计为 Bootstrap4 是有原因的，主要是为了从使用浮点数变为 flexbox。

Flexbox 需要两件事：

  1. 父容器（例如 DIV、section、aside、p 等）

  2. 一个或多个子元素（例如 div、p、img 等）

你在父节点上打开 flexbox ：display:flex;

然后，有各种开关。有些设置在父项上（如justify-content），但其他可能设置在项目上（如flex-grow:1）

YouTube 教程 - 快节奏和同类最佳

这是Flexbox 的一个很棒的备忘单。

观看教程，在 40 分钟后，您的问题将得到解决——您将了解 flexbox。

PS 我与视频或它的演示者没有任何联系——我很幸运地发现了它，现在把它传递下去。

推荐阅读