Question

继续关闭this question，我试图在调整窗口大小的同时模拟相同的动画。

到目前为止，我已经添加了＆＃34; .img-responsive＆＃34;类（在bootstrap.css中找到）到图像，但不幸的是，div的尺寸不会相应调整。

我该怎么办？

HTML：

<img class="img-responsive" src='http://www.videsignz.com/testing/images/water-front2.png' />
<div></div>

JS：

function animateit(){

    $('div').animate({'height' : '350px', 'top' : 0 }, 2000, function() {
        $('div').animate({'height' : 0, 'top' : '350px' }, 2000, animateit);
    });

}

animateit();

CSS：

.img-responsive {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
}

img {
    position:absolute; 
    left:0px; 
    top:0px; 
    z-index:5;
}

div {
    position:absolute; 
    left:0px; 
    top:350px; 
    background-color:#67d9ff; 
    height:0px; 
    display:block; 
    width:350px;
}

Answer 1

所以这不是最干净的方法，但这是一个解决方案。您可以将容器中的元素包装到position:relative（以包含它们）和overflow:hidden（这样多余的蓝色“水”将不可见），然后在该包装器集中添加重复的图像到opacity:0。第二张图片的目的是防止容器的高度和宽度折叠，看看其他两个元素的位置absolute如何，并且不注册width或height：

<强> HTML

<div class="wrapper">
  <img class="hidden" src='http://www.videsignz.com/testing/images/water-front2.png' />
  <img class="glass img-responsive" src='http://www.videsignz.com/testing/images/water-front2.png' />
  <div class="water"></div>
</div>

<强> CSS

.wrapper{
  position: relative;
  height:auto;
  width: 100%;
  max-width: 350px;
  overflow:hidden;
}

.img-responsive {
  display: block;
  width: 100% \9;
  max-width: 100%;
  height: auto;
}

.glass {
  position:absolute; 
  left:0px; 
  top:0px; 
  z-index:5;
}

.hidden{
  display: block;
  opacity: 0;
  width: 100%;
}

.water {
  position:absolute; 
  left:0px; 
  right: 0;
  top:350px; 
  background-color:#67d9ff; 
  height:0px; 
  display:block; 
}

<强> JS

function animateit(){

  $('.wrapper .water').animate({'height' : '350px', 'top' : 0 }, 2000, function() {
    $('.wrapper .water').animate({'height' : 0, 'top' : '350px' }, 2000, animateit);
  });

}

animateit();

FIDDLE

问题是引导程序有一个名为.hidden的类（我刚刚命名为我的名字），它将图像设置为display: none，因此没有注册高度。我改变了班级的名字：

WORKING BOOTPLY

制作一个动态的＆＃34; div响应

1 个答案: