黑马程序员技术交流社区

标题: 【广州前端】jquery360度全景查看插件 [打印本页]

作者: 李盼盼老师 时间: 2018-1-4 14:26
标题: 【广州前端】jquery360度全景查看插件
本帖最后由李盼盼老师于 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() {

               var pano = $("#myPano").pano({
            img: "/path/to/image.jpg",
            interval: 100,
            speed: 50
         });

         pano.moveLeft();
         pano.stopMoving();
         pano.moveRight();
         pano.stopMoving();
});

【案例Demo】

jQuery360全景插件.rar (125.03 KB, 下载次数: 44)

jQuery360全景插件.rar

125.03 KB, 下载次数: 0

售价: 1 黑马币 [记录] [购买]

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2