JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 基于Threejs的jQuery 3d图片旋转木马特效插件

基于Threejs的jQuery 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

【基于Threejs的jQuery 3d图片旋转木马特效插件】相关文章

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

2. 推荐12款响应式的 jQuery 旋转木马(传送带)插件

3. jQuery超炫图片3D背景视觉差特效插件

4. jQuery基于图片的元素背景模糊特效插件

5. jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单

6. jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单

7. 15个款优秀的 jQuery 图片特效插件

8. 10款web前端优秀的jQuery特效插件

9. JQuery Tree插件 - zTree v3.1 正式版发布

10. JQuery Tree插件 - zTree v3.1 正式版发布

本文来源:https://www.51html5.com/a1532.html

点击展开全部

﹝基于Threejs的jQuery 3d图片旋转木马特效插件﹞相关内容

「基于Threejs的jQuery 3d图片旋转木马特效插件」相关专题

其它栏目

也许您还喜欢