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

当前位置:主页 > jQuery库 > 图片效果 > jquery实现360度全景展示特效插件
jquery实现360度全景展示特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2017-05-16
    阅读:
麦子学院
简要教程

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

使用方法

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

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.pano.js"></script>                  
                
HTML结构

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

<div id="myPano" class="pano">
  <div class="controls">
    <a href="#" class="left">«</a>
    <a href="#" class="right">»</a>
  </div>
</div>   
                
初始化插件

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

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

配置参数

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

  • img:背景图片的url。必须是一张360度全景图。
  • interval:在调用moveLeftmoveRight方法时,用户按下鼠标左键或触摸屏幕时,触发移动事件的时间间隔。默认为100ms。
  • speed:动画移动的速度。默认为50ms。

方法

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

  • oveLeft(interval, speed):根据指定的intervalspeed向左移动图片。如果没有指定参数,使用默认值。
  • moveRight(interval, speed):根据指定的intervalspeed向右移动图片。如果没有指定参数,使用默认值。
  • 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

网友评论