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

基于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]