jquery拖动滑块切换图片的图片切换插件

当前位置:主页 > jQuery库 > 图片效果 > jquery拖动滑块切换图片的图片切换插件
jquery拖动滑块切换图片的图片切换插件
分享:

    插件介绍

    TwentyTwenty 是一款可以通过拖动滑块来切换图片的jQuery图片切换插件,TwentyTwenty图片切换插件构思新颖,使用它就像是剧场拉幕的效果一样。

    浏览器兼容性

    浏览器兼容性
    时间:10-24
    阅读:

简要教程

TwentyTwenty通过叠加两张图片来实现这种拖动滑块切换图片的效果。在滑块移动时,通过css来控制图片的样式,使得图片产生一种重叠的错觉。

HTML结构

<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>
                

调用方法

通过 twentytwenty()来调用这个插件

$(window).load(function() {
  $("#container1").twentytwenty();
});
                

更多信息:http://zurb.com/playground/twentytwenty