TwentyTwenty:一个图片特效Jquery 插件

3,303
TwentyTwenty:一个图片特效Jquery 插件
  • 1.19 / 5 5
1.19分(98票)
TwentyTwenty:一个图片特效Jquery 插件

继续发一篇水文。这个Jquery 插件值得推荐——虽然我不清楚在什么情况下适用,但你知道有这个东西,在需要的时候就能用上了——收集多点资源总不是坏事。插件的效果具体我也不会说,直接看官网demo吧。

简介

官方网站& demo:http://zurb.com/playground/twentytwenty

运行必备:jqueryjquery.event.move(一个用于在移动设备上支持触摸事件的类)

浏览器兼容:IE9 + ,其他现代浏览器

TwentyTwenty的工作原理是在彼此的顶部堆叠的两个图像。当滑块在整个图像移动,它使CSS的使用剪辑属性来裁剪图像左侧,这允许在右侧的图像通过容器来显示。

我们正在使用的自定义运动事件jquery.event.move库,以支持在移动设备上1:1滑块运动。

547078472020140518

保用方法

TwentyTwenty非常容易上手,只是包装容器内的两个图像。所述第一图像将在左侧,第二个将在右边。下面是一个容器例子:

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

然后调用twentytwenty()这个容器加载图像:

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

WordPress 插件

这里有个在TwentyTwenty 基础上开发的WordPress 插件,通过短代码 [TwentyTwenty][/TwentyTwenty] 就可以直接在后台的编辑器中使用。

下载地址:http://wordpress.org/plugins/twentytwenty/

124783921020140518

暂时木有评论啊,等您坐沙发呢!

打破沉默,我来发表评论鸟~