基于Threejs的jQuery 3d图片旋转木马特效插件


这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。 查看演示...
这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。

查看演示   在线下载  201504091855.zip


该旋转木马依赖于以下外部插件:

  • Three.js:https://github.com/mrdoob/three.js/
  • Stats.js:https://github.com/mrdoob/stats.js/
  • TweenMax:http://www.greensock.com/gsap-js/
  • PreloadJS:http://www.createjs.com/#!/PreloadJS

浏览器兼容
  • Firefox - 30.0.0 +
  • Chrome - 35.0.0 +
  • Explorer: 9 +
  • Ipad Safari: 7.0.0 +
  • Iphone Safari: 7.0.0 +
  • IOS Safari: 7.0.0 +
  • Android Chrome: 未测试
  • IOS Chrome: 未测试

使用方法
HTML结构

该旋转木马插件的HTML结构使用一个空的<div>即可。

  1. <div class="box"></div>           
复制代码
在调用插件之前要引入所有的外部依赖文件。然后可以使用下面的方法调用该旋转木马插件:

  1. $(function(){
  2.   $(".box").ig3js({
  3.       manifest: [
  4.           {src:"image1.jpg", id:"image1"},
  5.           {src:"image2.jpg", id:"image2"},
  6.           {src:"image3.jpg", id:"image3"},
  7.           {src:"image4.jpg", id:"image4"},
  8.           {src:"image5.jpg", id:"image5"},
  9.           {src:"image6.jpg", id:"image6"},
  10.           {src:"image7.jpg", id:"image7"}
  11.         ],
  12.         imagePath: 'images/'
  13.     });
  14. });         
复制代码
配置参数

事件

方法

via:http://www.htmleaf.com/jQuery/Sl ... r/201504091651.html

标签: 特效插件jQuery