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

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。