在线演示
相信大家如果使用过iphone/ipad的话,肯定对于倾斜控制(重力控制)比较熟悉,在今天的插件介绍中,我们推荐一款帮助你通过倾斜控制来控制图片效果的插件 - lenticular.js,使用它能够帮助你快速的实现倾斜设备来控制旋转的效果,相信对于在ipad/iphone或者其它触摸设备上开发web应用的朋友来说是一个超棒的工具。
这个插件最初为移动设备开发,可以针对当然,如果你使用一般PC,那么将会针对你的鼠标位置来实现特效。
实现方式
主要的实现方式是通过播放一系列的图片生成一个动画效果。我们可以通过制作每一帧的图片效果来达到一个动画过程。如下:
如何使用
如果我们要创建一个10帧的动画效果,使用代码如下:
// 创建一个 10 帧的动画效果,参数1:图片名称,参数2:帧数var myLenticular = new Lenticular.Image($('.lenticular'[0], { images: 'images/frame-##.jpg', frames: 10});
是不是非常简单,如果你需要一个超棒的重力效果的话,试试 lenticular.js 吧!
兼容性:现代浏览器
网站地址:http://lenticular.attasi.com/
在线演示:http://lenticular.attasi.com/
来源:帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js