jquery Panorama Plugins
- 当前版本: 1.0 (07/29/2010)
- Demo
-
Download
特性
- 支持自动旋转及向左、右方向的旋转
- 支持鼠标拖拽旋转和鼠标滑过旋转
- 支持按钮点击缩放和鼠标滚轮缩放
- 支持重置操作
兼容性
用法
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;margin:2px 0;}
|
|
05
|
.toolbar span{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 -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调用
|
03
|
for (var x=1; x<= 25; x++) {
|
|
04
|
arr.push("images/pic2/" + x + ".jpg");
|
|
06
|
$("#click").threesixty({
|
看看效果吧，:)
参数说明
|
参数
|
描述
|
默认值
|
|
images
|
物品360°拍摄的图片路径
|
|
|
method
|
触发方式
|
click
|
|
cycle
|
旋转次数
|
1
|
|
direction
|
旋转方向
|
forward
|
|
cursor
|
鼠标样式
|
all-scroll
|
|
auto
|
是否自动旋转
|
false
|
|
speed
|
旋转速度
|
150
|
|
scale
|
缩放比例
|
0.1
|
|
zoomLevel
|
缩放范围
|
-5,5
|
|
zoomSpeed
|
缩放速度
|
zoomSpeed
|
