jQuery3D全景效果展示插件

jQuery3D全景效果展示插件
http://www.woiweb.net/jquery-panorama-plugins.html
最近在研究商品的虚拟展示技术，我们项目中需要一个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 height=480 alt="" src="http://www.woiweb.net/wp-content/themes/Expi/images/grey.gif" width=480 original="images/pic2/1.jpg" loaded="false" jQuery1282022262207="5"> 

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 }); 

看看效果吧，:)