jQuery3D全景效果展示插件

posted by at 七月 29, 2010 所属分类 JQuery 25,172次阅读 37篇评论» 

标签：


最近在研究商品的虚拟展示技术，我们项目中需要一个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.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
zoomLevel 缩放范围 -5,5
zoomSpeed 缩放速度 zoomSpeed

推荐阅读：jQuery MultiSelect Plugin

您可能还会喜欢

欢迎转载，转载请注明来源于我爱互联网，多谢合作！

本文永久链接地址: http://www.woiweb.net/jquery-panorama-plugins.html

上一篇:
下一篇:
我要发表评论

37条评论

  1. Eric 说道：
    2011年10月29日 9:55 上午

    圖片放大之後會被遮住部份區域，可以新增滑鼠拖拉檢視，瀏覽放大後的整張圖片嗎?

    回复
  2. 免费情结 说道：
    2011年04月27日 1:10 下午

    不错。。研究中。。

    回复
  3. 帮您建网站 说道：
    2011年04月8日 6:45 上午

    貌似不兼容chrome，在chrome下没有效果。IE8看了效果还不错

    回复
  4. Johnny 说道：
    2011年04月8日 5:26 上午

    我在Chrome下好像遇到了一点问题。在IE9下第一次打开Demo那个图片很小，刷新页面后正常显示了。感觉很不错！效果很赞！继续加油哦！

    回复
  5. 90度 说道：
    2011年02月10日 11:20 上午

    看不太懂~哈哈

    回复
  6. 家有细路 说道：
    2010年12月29日 3:29 上午

    绝对要收藏!

    回复
  7. 暖 说道：
    2010年11月17日 1:18 下午

    以前看了,没时间仔细看,
    ====
    不知道flash是不是也是通过切换图片实现的3D?
    js有些东西还真不能和flash比啊
    ===
    你的验证很有趣,可我愣是没理解怎么个垂直法

    回复
    • 疯狂小强 说道：
      2010年11月18日 1:05 上午

      flash的也是通过n多图片来实现的，有的是封装起来的，有的没有。当然效果还是flash的号。

      就是把这些图片转正了，已经正的就不用管了，不正的通过滑动条来转正他，就OK了，我开始也没弄好，是了几个就会了，呵呵。

      回复
  8. Bein 说道：
    2010年09月28日 11:07 上午

    学习学习 JQ呀.

    回复
  9. Mathieu Savard 说道：
    2010年09月27日 4:54 上午

    Hi, I find your addition to the threesixty code interesting! You should check out the newest version with a loading progress indicator. Also feel free to fork threesixty on github to merge your progress so everyone can benefit.

    回复
  10. jony 说道：
    2010年08月31日 7:33 上午

    发现一个物体的3D效果得那么多张图片，如果好多物品都怎么办？
    是不是可以考虑改善下这个代码，从数据库读取单个面的图片数据

    回复
  11. web前端寒风 说道：
    2010年08月31日 3:17 上午

    博主可否发一个这个例子给我，呵呵
    Email：webbise@163.com
    先谢过了（很过分是吧，呵呵）

    回复
  12. web前端寒风 说道：
    2010年08月31日 3:14 上午

    很实用，正好一个同学想实现三维展示物品功能，学习一下了

    回复
  13. 7个神奇的jQuery 3D插件 | 田园牧歌 说道：
    2010年08月23日 4:41 下午

    [...] 本文将和您探讨一下jquery的3D效果，做为web开发和设计者，我们总要寻找一些新的资源，窍门，但有没想过写很少的代码就可以创建惊奇的3D效果呢？之前，在别人的引导下用jquery做了一个物品3D效果展示的插件，今天在网上闲逛时又发现了一些jquery的3D效果，分享下。 [...]

    回复
  14. Terryang 说道：
    2010年08月16日 2:42 上午

    一双臭鞋，大打折扣啊，不知道你怎么想的。。。。

    回复
  15. lvxiang 说道：
    2010年08月14日 6:49 上午

    下载不了啊。

    回复
  16. rolyer 说道：
    2010年08月13日 12:46 上午

    不错，学习学习

    回复
  17. 左左 说道：
    2010年08月4日 9:58 上午

    我最近也在研究这个东东，现在Download不能下载，能否发到我的邮箱互相学习一下，谢谢！

    回复
  18. the Success Ladder 说道：
    2010年07月30日 7:52 下午

    Very interesting article, thanks. Keep up the good work.

    回复

发表评论

RSS订阅 RSS 关注我的微博 Weibo

工具

文章归档

页面

新浪RIA开发工程师，专注互联网开发与应用。

更多 »

Copyright 我爱互联网
Powered by WordPress, Supported By 疯狂小强, SiteMap

无觅相关文章插件，快速提升流量