专栏首页DeveWorkTwentyTwenty:一个图片特效Jquery 插件

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 条评论
登录 后参与评论

相关文章

  • iOS8 、iPhone6 及iPhone6+:Apple touch icon 与Startup Image

    本文可视为《iOS / Android 移动设备中的 Touch Icons》及《iOS 7 Web App的初级优化之道》的补充文,因为iOS8 、iPhon...

    Jeff
  • WordPress中当评论审核通过时候给评论者发邮件

    如果你的WordPress 站点是开启评论审核的,那么如果能让评论者知道TA 的评论是否通过,就能进一步提升“回头率”。Comment Approved就是这么...

    Jeff
  • 使用无觅相关文章插件一定要删除的代码

    无觅相关文章插件许多博主都在使用,这个插件的确是不错,图文模式的排版美观(虽然文章相关性一直不够),无论是读者还是博主,浏览体验都很好。对无觅本身来说,这一个小...

    Jeff
  • hexo静态网站的PWA支持

    PWA(Progressive Web App)的中文名叫做渐进式网页应用,早在2014年, W3C 公布过 Service Worker 的相关草案,但是其在...

    EatRice
  • CentOS 6安裝Xfce桌面、VNC、Firefox、Flashplayer

    众所周知,linux系统使用SSH工具连接后是黑色的页面,那么今天给大家带来的是centos安装桌面环境。使大家可以像操作windows一样使用桌面环境来进行操...

    CloudZ
  • 渐进式图像重构网络:像画画一样重构图像

    图像重构(IR)对物理与生命科学领域的图像应用软件来说至关重要,其目的在于根据 ground truth 图像抽取出的的各类信息对图像进行重构。

    机器之心
  • 基于FPGA三种边缘检测算法的演示

    边缘检测是另一种常用的滤波器。在物体的边缘,通常都有像素值的变化,反映了物体与背景的差异,或者两个物体之间的差异。由于边缘以像素之间的差异为特点,因此使用差分滤...

    FPGA开源工作室
  • 项目文件中的已知 NuGet 属性(使用这些属性,创建 NuGet 包就可以不需要 nuspec 文件啦)

    发布于 2018-05-10 13:49 更新于 2018-06...

    walterlv
  • 持久层框架之MyBatis

    1、mybatis框架介绍:   MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software founda...

    赵小忠
  • 纽约大学神经学教授Eero Simoncelli万字解析:机器生成的图像为何能骗过你的眼睛?

    AI科技评论按:在刚刚闭幕的ICLR2017上,纽约大学神经学、数学、心理学教授Eero Simoncelli作为特邀嘉宾分享了他在机器表征、人类感知方面的研究...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券