基于Threejs的jQuery 3d图片旋转木马特效插件
这是一款基于ThreeJS的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。
浏览器兼容
使用方法
HTML结构
该旋转木马插件的HTML结构使用一个空的<div>即可。
在调用插件之前要引入所有的外部依赖文件。然后可以使用下面的方法调用该旋转木马插件:
配置参数
事件
方法
via:http://www.htmleaf.com/jQuery/Sl ... r/201504091651.html
查看演示 在线下载 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>即可。
- <div class="box"></div>
在调用插件之前要引入所有的外部依赖文件。然后可以使用下面的方法调用该旋转木马插件:
- $(function(){
- $(".box").ig3js({
- manifest: [
- {src:"image1.jpg", id:"image1"},
- {src:"image2.jpg", id:"image2"},
- {src:"image3.jpg", id:"image3"},
- {src:"image4.jpg", id:"image4"},
- {src:"image5.jpg", id:"image5"},
- {src:"image6.jpg", id:"image6"},
- {src:"image7.jpg", id:"image7"}
- ],
- imagePath: 'images/'
- });
- });
配置参数
事件
方法
via:http://www.htmleaf.com/jQuery/Sl ... r/201504091651.html
【基于Threejs的jQuery 3d图片旋转木马特效插件】相关文章
1. 基于Threejs的jQuery 3d图片旋转木马特效插件
2. 推荐12款响应式的 jQuery 旋转木马(传送带)插件
5. jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单
6. jQuery Wheel Menu:实现漂亮的 Path 风格旋转菜单
9. JQuery Tree插件 - zTree v3.1 正式版发布
10. JQuery Tree插件 - zTree v3.1 正式版发布
本文来源:https://www.51html5.com/a1532.html
﹝基于Threejs的jQuery 3d图片旋转木马特效插件﹞相关内容
- RequireJS Optimizer 的使用和配置方法
- 20个jQuery和CSS 的文本特效插件
- [JQuery]ScrollMe滚动特效插件
- jQuery 3D圆盘旋转焦点图 支持鼠标滚轮
- 基于animate.css的jQuery文字动画插件
- 另外一款超棒的响应式布局jQuery插件 - Freetile.js
- Opera Mini 7发布Android版,支持HTML5和3D图形
- jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效
- jQuery炫酷图片3d背景视觉差特效
- Chrome 18 将提升HTML5的2D图形性能