图片/图形
炫酷iPhone手机3D旋转互动jQuery特效
PetitQ
这是一款效果超酷的 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。
<body>
...<div id="interactive_3d">
<img src="images/frame_1.png">
</div>
...</body>
在容器中只需要添加第一帧的图片，其它帧的图片插件会自动处理。
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
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
