jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片,也可以通过左右导航按钮来移动图片。它兼容ie8浏览器,支持移动触摸设备,非常实用。
使用方法
在页面中引入jquery和jquery.pano.js文件。
HTML结构
该360度全景展示特效的HTML结构如下:
«
»
初始化插件
在页面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();
});
jquery.pano.js 360度全景展示特效jquery插件的github地址为:/seancoyne/pano