插件描述：jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片，也可以通过左右导航按钮来移动图片。
jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片，也可以通过左右导航按钮来移动图片。它兼容ie8浏览器，支持移动触摸设备，非常实用。
使用方法
在页面中引入jquery和jquery.pano.js文件。
1 2 | <script src="path/to/jquery.min.js"></script><script src="path/to/jquery.pano.js"></script> |
HTML结构
该360度全景展示特效的HTML结构如下：
1 2 3 4 5 6 | <div id="myPano" class="pano"> <div class="controls"> <a href="#" class="left">«</a> <a href="#" class="right">»</a> </div></div> |
初始化插件
在页面DOM元素加载完毕，可以通过pano()方法来初始化该360度全景展示特效插件。
1 | $("#myPano").pano({ img: "./sphere.jpg"}); |
配置参数
该360度全景展示特效插件有3个配置参数：
img：背景图片的url。必须是一张360度全景图。
interval：在调用moveLeft或moveRight方法时，用户按下鼠标左键或触摸屏幕时，触发移动事件的时间间隔。默认为100ms。
speed：动画移动的速度。默认为50ms。
方法
该360度全景展示特效插件有3个公开的方法：
oveLeft(interval, speed)：根据指定的interval和speed向左移动图片。如果没有指定参数，使用默认值。
moveRight(interval, speed)：根据指定的interval和speed向右移动图片。如果没有指定参数，使用默认值。
stopMoving()：停止移动图片。
例如：
1 2 3 4 5 6 7 8 9 10 11 | $(document).ready(function() { var pano = $("#myPano").pano({ img: "/path/to/image.jpg", interval: 100, speed: 50 }); pano.moveLeft(); pano.stopMoving(); pano.moveRight(); pano.stopMoving();}); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 情人节表白神器
- 下一个特效： jQuery商品发布三级联动菜单代码