图片/图形

实现360度全景展示jQuery特效插件

创客主机

实现360度全景展示jQuery特效插件-创客云
jquery.pano.js 是一款可以实现 360 度全景展示特效的 jquery 插件。该 360 度全景展示特效支持使用鼠标拖拽移动图片,也可以通过左右导航按钮来移动图片。它兼容 ie8 浏览器,支持移动触摸设备,非常实用。

使用方法

在页面中引入 jquery 和 jquery.pano.js 文件。

也想出现在这里?联系我们
WordPress 主题
  1. <script src="path/to/jquery.min.js"></script>
  2. <script src="path/to/jquery.pano.js"></script>

HTML 结构

该 360 度全景展示特效的 HTML 结构如下:

  1. <div id="myPano" class="pano">
  2.   <div class="controls">
  3.     <a href="#" class="left">«</a>
  4.     <a href="#" class="right">»</a>
  5.   </div>
  6. </div>

初始化插件

在页面 DOM 元素加载完毕,可以通过 pano()方法来初始化该 360 度全景展示特效插件。

  1. $("#myPano").pano({
  2.   img: "./sphere.jpg"
  3. });

配置参数

该 360 度全景展示特效插件有 3 个配置参数:

img:背景图片的 url。必须是一张 360 度全景图

interval:在调用 moveLeft 或 moveRight 方法时,用户按下鼠标左键或触摸屏幕时,触发移动事件的时间间隔。默认为 100ms

speed:动画移动的速度。默认为 50ms

方法

该 360 度全景展示特效插件有 3 个公开的方法:

oveLeft(interval, speed):根据指定的 interval 和 speed 向左移动图片。如果没有指定参数,使用默认值

moveRight(interval, speed):根据指定的 interval 和 speed 向右移动图片。如果没有指定参数,使用默认值

stopMoving():停止移动图片

例如:

  1. $(document).ready(function(){
  2.   var pano = $("#myPano").pano({
  3.     img: "/path/to/image.jpg",
  4.     interval: 100,
  5.     speed: 50
  6.   });
  7.  
  8.   pano.moveLeft();
  9.   pano.stopMoving();
  10.   pano.moveRight();
  11.   pano.stopMoving();
  12.  
  13. });

Github 地址:https://github.com/seancoyne/pano

(2)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!