移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 – lenticular.js

帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 - lenticular.js

在线演示

相信大家如果使用过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 吧!

来源:帮助你在移动设备上生成倾斜控制(重力控制)的旋转效果jQuery插件 – lenticular.js

金牌狙击手

52html5是一个web前端|html5资源平台,为广大html5开发者及爱好者提供html5相关的教程、资讯、html5游戏、html5教程等,并涉及css3、javascript前端知识。