iphone桌面滑动效果html5,jQuery炫酷iPhone手机3D旋转互动特效

这是一款效果超酷的jQuery iPhone手机3D旋转互动特效插件。自从flash动画衰落之后，网页上交互动画就变得十分乏味了，我们一直在期待HTML5 CANVAS能得到更为广泛的支持，从而让交互动画再发生机。在这个插件中，使用一个简单的方法，利用jQuery和多张不同角度的图片来模拟一种3d交互的动画效果。

注意：该3d旋转互动插件已经在Chrome, Firefox, Safari的桌面和移动设备浏览器测试通过，IE浏览器上还未做过测试。

HTML结构

要使用这个3d旋转互动插件，需要在html的头部引入jQuery和jQuery.interactive_3d.js文件。我们还需要多张不同角度的iPhone图片来制作帧效果。插件中使用了30张不同角度的图片。每一张图片都是xxx_frame-number的格式，例如，第一张图片的名字为anything_1.jpg，那么第二张图片的名字就是anything_2.jpg。

...

...

在容器中只需要添加第一帧的图片，其它帧的图片插件会自动处理。

JAVASCRIPT

通过下面的jQuery代码来调用插件：

$("#interactive_3d").interactive_3d({

frames: 30

});

上面是默认的调用该3D旋转互动特效插件的方法，下面是带有参数的调用方法：

$("#interactive_3d").interactive_3d({

frames: 10,

cursor: "move",

speed: 0,

entrance: true,

preloadImages: true,

touchSupport: true,

loading: "Loading..",

autoPlay: false

});

下面来说明一下这些参数：

frames：这个参数是必须的参数。它接收用于作为图像帧的数量。数值越高，交互动画就越平滑。例如，如果你有100幅图片，可以设置该参数为100。默认值为10。

position：该参数用于设置侧边栏菜单出现的方向。可用选项为：left, right, top 和 bottom。默认值为"left"。

cursor：该参数用于定义鼠标滑出交互区域时是否显示鼠标样式。该参数接收CSS的鼠标样式，默认值为“move”。

speed：该参数用于设置旋转动画的速度，单位是毫秒。如果你的图片太少，而旋转速度太快的话，动画就显得不够平滑。一般设置为10-50ms之间比较合适，默认值为0。

entrance：设置为true时，iPhone会在初始化时有一个旋转动画，用以告知用户该对象是可以3D旋转互动的对象。默认值为true。

preloadImages：该参数用于在交互前预加载图片。设置为ture，插件将在初始化时加载所有的帧图片。默认值为true。

touchSupport：设置为true时，该插件支持触摸屏设备。默认值为true。

loading：这个参数只在preloadImages设置为true时有用。它会在图片预加载是显示一个加载指示器。该参数接收HTML标签。默认值是"Loading.."。

autoPlay：这个参数将取代entrance参数。设置为true，iPhone手机将自动做3d旋转。该参数接收旋转的速度，单位为毫秒。默认值为false。