TwentyTwenty：一个图片特效Jquery 插件

Jeff

发布于 2018-01-19 17:34:50

4.8K0

发布于 2018-01-19 17:34:50

文章被收录于专栏：DeveWork

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

官方网站& demo：http://zurb.com/playground/twentytwenty 运行必备：jquery、jquery.event.move（一个用于在移动设备上支持触摸事件的类）浏览器兼容：IE9 + ，其他现代浏览器

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

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

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

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

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

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

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014/05/17，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度