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
当前版本: 1.0 (07/29/2010)
Demo
Download
特性
支持自动旋转及向左、右方向的旋转
支持鼠标拖拽旋转和鼠标滑过旋转
支持按钮点击缩放和鼠标滚轮缩放
支持重置操作
兼容性
Firefox 3.6
IE6-IE8
其它待测
用法
1、首先需要引入 jquery Lib包、jquery.mousewheel.js, jquery.panorama-1.0.js. 我们在这用到jquery的mousewheel插件来实现鼠标滚轮事件。

view sourceprint?1 <SCRIPT src="js/jquery-1.3.2.min.js" type=text/javascript><!--mce:0--></SCRIPT> 

2 <SCRIPT src="js/jquery.mousewheel.js" type=text/javascript><!--mce:1--></SCRIPT> 

3 <SCRIPT src="js/jquery.panorama-1.0.js" type=text/javascript><!--mce:2--></SCRIPT>

2、加入CSS样式

view sourceprint?01 .panorama_box{border:1px solid #fff; margin:auto;} 

02 .image_box{border:1px solid #369; margin:auto; overflow:hidden;position:relative;} 

03 .image_box img{position:relative;} 

04 .toolbar{border:1px solid #CCCCCC;height:45px;margin:2px 0;} 

05 .toolbar span{height:40px;width:38px;margin:2px;cursor:pointer;display:block;float:right;} 

06 .zoomin{background:url("images/toolbar.jpg") no-repeat scroll 0 0;} 

07 .zoomout{background:url("images/toolbar.jpg") no-repeat scroll -38px 0;} 

08 .turnleft{background:url("images/toolbar.jpg") no-repeat scroll -112px 0;} 

09 .turnright{background:url("images/toolbar.jpg") no-repeat scroll -76px 0;} 

10 .start{background:url("images/toolbar.jpg") no-repeat scroll -150px 0;} 

11 .pause{background:url("images/toolbar.jpg") no-repeat scroll -188px 0;} 

12 .reset{background:url("images/toolbar.jpg") no-repeat scroll -226px 0;}

3、需要将你拍好的多张物品图片命名规则后放置指定目录中，如：images/pic2/，并在页面中添加展示物品的第一张图

view sourceprint?1 <IMG id=click style="BEHAVIOR: none" height=480 alt="" src="http://www.woiweb.net/wp-content/themes/Expi/images/grey.gif" width=480 loaded="false" isImg="false" original="images/pic2/1.jpg" jQuery1281881526875="10">

4、Javascript调用

view sourceprint?01 $(function() { 

02     var arr = [] 

03     for (var x=1; x<= 25; x++) { 

04         arr.push("images/pic2/" + x + ".jpg"); 

05     } 

06     $("#click").threesixty({ 

07         images:arr, 

08         method:'click', 

09         'cycle':1

10     }); 

11 });

看看效果吧，:)

参数说明
参数 描述 默认值
images 物品360°拍摄的图片路径 
method 触发方式 click
cycle 旋转次数 1
direction 旋转方向 forward
cursor 鼠标样式 all-scroll
auto 是否自动旋转 false
speed 旋转速度 150
scale 缩放比例 0.1
zoomLevel 缩放范围 -5,5
zoomSpeed 缩放速度 zoomSpeed