[转]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插件来实现鼠标滚轮事件。

1 <script type="text/javascript" src="js/jquery-1.3.2.min.js" type=s"text/javascripts" />
2 <script type="text/javascript" src="js/jquery.mousewheel.js" type=s"text/javascripts" />
3 <script type="text/javascript" src="js/jquery.panorama-1.0.js" type=s"text/javascripts" />
 

2、加入css样式

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/,并在页面中添加展示物品的第一张图

1 <img id="click" src="http://www.woiweb.net/wp-content/themes/Expi/images/grey.gif" alt="" width="480" height="480" original="images/pic2/1.jpg">

4、Javascript调用

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



[本日志由 黑咖啡 于 2011-06-25 02:05:19 编辑]
上一篇: 最新28个很棒的 jQuery 教程
下一篇: 诡异的windows 7的C盘回收站不显示文件问题
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: jQuery 3D 全景 效果 展示 插件
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
新拆迁法
回复回复新拆迁法[2011-06-30 11:06:05 | | | del | 取消审核]
[ 正在加载评论信息,请稍候... ]
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 支持Gravatar头像.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.