360全景html插件,jquery实现360度全景展示特效插件

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地址为：https://github.com/seancoyne/pano