jQuery3D全景效果展示插件

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

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样式

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;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 -38px0;}

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 -150px0;}

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

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

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