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