TwentyTwenty:一个图片特效Jquery 插件

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

简介

官方网站& demo:http://zurb.com/playground/twentytwenty 运行必备:jqueryjquery.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(); });

WordPress 插件

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Phoenix的Android之旅

如何加载一张超大高清图

"大图片加载容易做,可是这个需求要保证在不OOM的情况下能放大查看,还要能清晰展示,这得怎么呢?",愁眉苦脸的小呼说到。

11320
来自专栏Android干货

Android项目实战(四十五):Zxing二维码切换横屏扫描

20950
来自专栏coding

sublime text 3在win10下中文显示为方块的解决方式

65930
来自专栏七夜安全博客

python爬虫:将本人博客园文章转化为MarkDown格式

21830
来自专栏企鹅号快讯

Webpack,请开始你的表演(一)

这是一篇 Webpack 入门文章,之所以写这篇文章,原因有二: 工作和学习中一直在用,但是总有一些内容理解的不够; 自己目前检索到的有关 Webpack 的文...

22370
来自专栏程序你好

JavaScript异步图像上传

12620
来自专栏前端黑板报

“节流函数”提高性能

浏览器中DOM操作比起非DOM交互需要更多的内存和CUP时间,连续的DOM操作有可能会导致浏览器挂起,甚至崩溃。尤其IE中的onresize事件。 高频率的更改...

26480
来自专栏IMWeb前端团队

分享Rich化方法

分享Rich化方法 Rich化例子 ? 添加白名单 腾讯员工RTX找v_linbo添加域名白名单,如huayang.qq.com 外部人员发邮件到connect...

25690
来自专栏游戏杂谈

Flex的UI组件Tile

Tile继承于容器类(Container),有三个属性:direction(子项在容器中的放置样式:水平、垂直)、tileHeight(子项的高度)、tileW...

10120
来自专栏FreeBuf

披着羊皮的狼:如何利用漏洞以特定图标伪装可执行文件

这个漏洞背后的图标显示bug可以深溯到Windows图像处理代码,其允许攻击者“借来”本地其他常用的图标并自动将可移植的可执行文件伪装起来,这样就更容易诱使用户...

39080

扫码关注云+社区

领取腾讯云代金券