图片/图形
实现360度全景展示jQuery特效插件
PetitQ
jquery.pano.js 是一款可以实现 360 度全景展示特效的 jquery 插件。该 360 度全景展示特效支持使用鼠标拖拽移动图片，也可以通过左右导航按钮来移动图片。它兼容 ie8 浏览器，支持移动触摸设备，非常实用。
使用方法
在页面中引入 jquery 和 jquery.pano.js 文件。
也想出现在这里？联系我们吧
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.pano.js"></script>
HTML 结构
该 360 度全景展示特效的 HTML 结构如下：
<div id="myPano" class="pano">
<div class="controls">
<a href="#" class="left">«</a>
<a href="#" class="right">»</a>
</div>
</div>
初始化插件
在页面 DOM 元素加载完毕，可以通过 pano()方法来初始化该 360 度全景展示特效插件。
$("#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()：停止移动图片
例如：
$(document).ready(function(){
var pano = $("#myPano").pano({
img: "/path/to/image.jpg",
interval: 100,
speed: 50
});
pano.moveLeft();
pano.stopMoving();
pano.moveRight();
pano.stopMoving();
});
Github 地址：https://github.com/seancoyne/pano
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
