jQuery3D全景效果展示插件 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Aug 17

jQuery3D全景效果展示插件 不指定

jquery Panorama Plugins 很帅……
•当前版本: 1.0 (07/29/2010)
Demohttp://tommyhu.cn//plugin/demo/panorama/
•Download
特性
•支持自动旋转及向左、右方向的旋转
•支持鼠标拖拽旋转和鼠标滑过旋转
•支持按钮点击缩放和鼠标滚轮缩放
•支持重置操作
兼容性
•Firefox 3.6
•IE6-IE8
•其它待测
用法
1、首先需要引入 jquery Lib包、jquery.mousewheel.js, jquery.panorama-1.0.js. 我们在这用到jquery的mousewheel插件来实现鼠标滚轮事件。

<script src="js/jquery-1.3.2.min.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"><!--mce:1--></script>
<script src="js/jquery.panorama-1.0.js" type="text/javascript"><!--mce:2--></script>

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 -38px0;}
.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 -150px0;}
.pause{background:url("images/toolbar.jpg") no-repeat scroll -188px0;}
.reset{background:url("images/toolbar.jpg") no-repeat scroll -226px0;}

3、需要将你拍好的多张物品图片命名规则后放置指定目录中,如:images/pic2/,并在页面中添加展示物品的第一张图
<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调用
看看效果吧,:)
参数说明
参数 描述 默认值
images 物品360°拍摄的图片路径  
method 触发方式 click
cycle 旋转次数 1
direction 旋转方向 forward
cursor 鼠标样式 all-scroll
auto 是否自动旋转 false
speed 旋转速度 150
scale 缩放比例 0.1
zoomLevel 缩放范围 -5,5
zoomSpeed 缩放速度 zoomSpeed
更多相关效果请关注:http://www.woiweb.net/
▲返回顶部
Last modified by tommyhu on2010/08/17 22:34

Add a comment

Nickname

emotemotemotemotemotemotemotemotemotemotemotemotemotemotemotemot