逐渐放大图像的Javascript幻灯片

debugcn 发表于 Dev

我想要这样的东西：

`http://codepen.io/docode/pen/EjyVQY`.

在这种情况下，我只关心此幻灯片的缩放比例。如何在JS（而不是CSS）中实现相同的缩放效果？请记住，我希望缩放本身发生。不能通过单击或其他事件处理程序。

谢谢你的帮助！:)

更新：必须在宽度和高度保持不变的情况下实现缩放效果。

朝夕

HTML：

<div id="slideshow">
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-3.jpg"/>
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-2.jpg"/>    
<img src="http://docode.com.ua/wp-content/uploads/pictures/pic-1.jpg"/>    
</div>

CSS：

#slideshow {
    width:100%;
    height:100%;
    position:fixed;


}

#slideshow img {
   width:100%;
    height:100%;
   display:block;
    left:0;
    top:0;
   position:absolute;
    opacity:0;

}

jQuery的：

images = $('#slideshow img');

i = 0;
anima(i);
setInterval(function() {

  if (i < images.length - 1) {

    i++;

  } else {
    i = 0;

  }
  anima(i);
}, 15000);

function anima(i) {

  $(images).eq(i).fadeTo(100, 0.8);
  $(images).eq(i).animate({
    width: '150%',
    height: '150%',
    top: '-25%',
    left: '-25%',
    opacity: 1
  }, 15000, "linear", function() {
    $(this).fadeTo(1000, 0, function() {
      $(this).css('width', '100%');
      $(this).css('height', '100%');
      $(this).css('top', '0');
      $(this).css('left', '0');
    });

  });
}

演示：http : //fiddle.jshell.net/sinisake/w0jz31uc/show/播放值-加快或减慢速度，并根据需要更改宽度/高度动画。这个可以全屏显示，但也可以放在页面上的某个容器中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。