基于jQuery的3D全景效果展示插件

这款效果非常的不错,比较适合做产品图片360度全面观看。
特性
支持自动旋转及向左、右方向的旋转
支持鼠标拖拽旋转和鼠标滑过旋转
支持按钮点击缩放和鼠标滚轮缩放
支持重置操作
兼容性
Firefox 3.6
IE6-IE8
其它待测
用法
、首先需要引入 jquery Lib包、jquery.mousewheel.js, jquery.panorama-1.0.js. 我们在这用到jquery的mousewheel插件来实现鼠标滚轮事件。
[code]
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
<script src="js/jquery.panorama-1.0.js" type="text/javascript"></script>
[/code]
、加入CSS样式
[code]
.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;}
[/code]
、需要将你拍好的多张物品图片命名规则后放置指定目录中,如:images/pic2/,并在页面中添加展示物品的第一张图
[code]
<img id="click" src="//www.woiweb.net/wp-content/themes/Expi/images/grey.gif" alt="" width="480"height="480" original="images/pic2/1.jpg">
[/code]
、Javascript调用
[code]
$(function() {
var arr = []
for (var x=1; x<= 25; x++) {
arr.push("images/pic2/" + x + ".jpg");
}
$("#click").threesixty({
images:arr,
method:\'click\',
\'cycle\':1
});
});
[/code]

1. 本站所有文章及资源来源于用户上传和网络,如有侵权请联系站长处理!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律,否则后果自负!
4. 如有链接无法下载、失效或广告,请联系管理员处理!
5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

中国站长社区 » 基于jQuery的3D全景效果展示插件

发表评论

发布资源,赚取佣金,随时提现

立即发布 了解详情