Question

我想要这样的事情：

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

在这种情况下，我所关心的只是此幻灯片放映的缩放方面。如何在JS而不是CSS中实现相同的缩放效果？请记住，我希望自己进行缩放。不是通过点击或其他事件处理程序。

感谢您的帮助！：）

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

Answer 1

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/使用值进行游戏 - 加速或减慢速度，根据需要更改宽度/高度动画。这个可以全屏显示，但也可以放在页面上的某个容器中。

Javascript幻灯片，逐渐放大图像

1 个答案: