jquery 360度全景展示特效插件pano.js

所属分类:输入,媒体-拖和放,图片展示

 36820  349  查看评论 (5)
分享到微信朋友圈
X
jquery 360度全景展示特效插件pano.js ie兼容6

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">&laquo;</a>
        <a href="#" class="right">&raquo;</a>
    </div>
</div>

 初始化插件

在页面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拖动图片排列插件

本插件是基于dragst.js,拖拽排列图片的顺序,使用方法简单,兼容各大浏览器
  拖和放
 20751  277

基于H5的拖拽功能

基于H5的拖拽功能,再用jQuery进行了功能完善,拖动后根据放置的位置来布局。
  拖和放
 35627  320

jQuery双击拖拽图片

jQuery鼠标双击事件拖拽图片
  拖和放
 25456  267

页面多板块拖动,调整边缘,吸附效果(原创)

接到一个需求:楼宇房间的简单布局:点击左侧房屋号码,到右面出现以后可以各种调整。
  拖和放
 24622  311

讨论这个项目(5)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ●ら任┊逍遥 0
    2018/1/22 13:45:54

    你好 我要把指定的小图片弄到指定的位置上   应该怎么弄???

    回复
    笑死鬼(?魔の笑い) 0
    2018/1/17 13:22:32

    是全景,但是呢,却没有全景的感觉

    回复
    lipp 0
    2017/8/11 17:37:55

    能前进后退就好了

    回复
    房i 0
    2017/6/16 10:25:09

    左右按钮的class可以改吗

        你灿烂的微笑0
        2017/8/29 10:52:56

        可以的

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复