本帖最后由 李盼盼老师 于 2018-1-4 14:42 编辑
【简介】 jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片，也可以通过左右导航按钮来移动图片。它兼容ie8浏览器，支持移动触摸设备，非常实用。 【使用方法】 1. 引入文件 [HTML] 纯文本查看 复制代码 <script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.pano.js"></script>
2. HTML结构 案例中的html结构如下 [HTML] 纯文本查看 复制代码 <div id="myPano" class="pano">
<div class="controls">
<a href="#" class="left">«</a>
<a href="#" class="right">»</a>
</div>
</div>3. 初始化插件 在页面DOM元素加载完毕，可以通过pano()方法来初始化该360度全景展示特效插件。 [JavaScript] 纯文本查看 复制代码 $("#myPano").pano({ img: "./sphere.jpg"});配置参数 该360度全景展示特效插件有3个配置参数： img： 背景图片的url。必须是一张360度全景图。 interval： 在调用moveLeft或moveRight方法时，用户按下鼠标左键或触摸屏幕时，触发移动事件的时间间隔。默认为100ms。 speed： 动画移动的速度。默认为50ms。 4. 方法 该360度全景展示特效插件有3个公开的方法： - oveLeft(interval, speed)：根据指定的interval和speed向左移动图片。如果没有指定参数，使用默认值。
- moveRight(interval, speed)：根据指定的interval和speed向右移动图片。如果没有指定参数，使用默认值。
- stopMoving()：停止移动图片。
例如： [JavaScript] 纯文本查看 复制代码 $(document).ready(function() {[/align] var pano = $("#myPano").pano({
img: "/path/to/image.jpg",
interval: 100,
speed: 50
});
pano.moveLeft();
pano.stopMoving();
pano.moveRight();
pano.stopMoving();
}); 【案例Demo】
| 
收藏
淘帖
踩
