jQuery3D全景效果展示插件
最近在研究商品的虚拟展示技术，我们项目中需要一个3D展示的功能，3D展示也就是把一个商品旋转360°来展示它的各个层面，网上Baidu+Google后，还真发现这种实现方式有很多，比如有Quicktime的，Flash的和JavaScript的。
分析后，发现它们各有优缺点，用Quicktime来实现，首先需要将全景图片制作成.mov格式的文件，而且客户浏览器必须安装Quicktime插件才能看效果；用Flash来实现，需要学习Flash的相关技术和ActionScript，这些我都不熟，所以放弃了，呵呵。对于Javascript实现方式，我还是很赞同的，因为它不需安装任何插件，而且开发起来更容易上手，尤其现在有了jQuery，它不仅降低了开发的工作量而且可以轻易实现更多的展示效果，所以最终选择了jQuery来实现。
经过几天时间，1.0版本终于出来了，现在贴出来与大家一起分享，如果有朋友正在做这方面的开发，希望能给你有所帮助，就算抛砖引玉了，希望多多交流阿，呵呵，不多说了，看正文吧 。
参考：http://www.mathieusavard.info/
JQuery Panorama Plugins
特性
- 支持自动旋转及向左、右方向的旋转
- 支持鼠标拖拽旋转和鼠标滑过旋转
- 支持按钮点击缩放和鼠标滚轮缩放
- 支持重置操作
兼容性
- Firefox 3.6
- IE6-IE8
- 其它待测
用法
1、首先需要引入 jQuery Lib包、jquery.mousewheel.js, jquery.panorama-1.0.js. 我们在这用到jquery的mousewheel插件来实现鼠标滚轮事件。
<script type=”text/javascript” src=”js/jquery-1.3.2.min.js” type=”text/javascripts” />
<script type=”text/javascript” src=”js/jquery.mousewheel.js” type=”text/javascripts” />
<script type=”text/javascript”src=”js/jquery.easing.1.3.js” type=”text/javascript” />
<script type=”text/javascript” src=”js/jquery.panorama-1.0.js” type=”text/javascripts” />
2、加入CSS样式
.panorama_box{border:1px solid #fff; margin:auto;}
.image_box{border:1px solid #369; margin:auto; overflow:hidden;position:relative;}
.image_box img{position:relative;}
.toolbar{border:1px solid #CCCCCC;height:45px;margin:2px 0;}
.toolbar span{height:40px;width:38px;margin:2px;cursor:pointer;display:block;float:right;}
.zoomin{background:url(“images/toolbar.jpg”) no-repeat scroll 0 0;}
.zoomout{background:url(“images/toolbar.jpg”) no-repeat scroll -38px 0;}
.turnleft{background:url(“images/toolbar.jpg”) no-repeat scroll -112px 0;}
.turnright{background:url(“images/toolbar.jpg”) no-repeat scroll -76px 0;}
.start{background:url(“images/toolbar.jpg”) no-repeat scroll -150px 0;}
.pause{background:url(“images/toolbar.jpg”) no-repeat scroll -188px 0;}
.reset{background:url(“images/toolbar.jpg”) no-repeat scroll -226px 0;}3、需要将你拍好的多张物品图片命名规则后放置指定目录中，如：images/pic2/，并在页面中添加展示物品的第一张图
4、Javascript调用
$(function() {
var arr = []
for (var x=1; x<= 25; x++) {
arr.push(“images/pic2/“ + x + “.jpg”);
}
$(“#click”).threesixty({
images:arr,
method:’click’,
‘cycle’:1
});
});看看效果吧，:)
参数说明
| 参数 | 描述 | 默认值 |
|---|---|---|
| images | 物品360°拍摄的图片路径 | |
| method | 触发方式 | click |
| cycle | 旋转次数 | 1 |
| direction | 旋转方向 | forward |
| cursor | 鼠标样式 | all-scroll |
| auto | 是否自动旋转 | false |
| speed | 旋转速度 | 150 |
| scale | 缩放比例 | 0.1 |
| maxZoomLevel | 最大放大比例 | 5 |
