查看演示

插件描述：jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片，也可以通过左右导航按钮来移动图片。

使用方法

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

[HTML] 纯文本查看 复制代码

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

二。360度全景展示特效的HTML结构如下：

[HTML] 纯文本查看 复制代码

<div id="myPano" class="pano">
    <div class="controls">
        <a href="#" class="left">«</a>
        <a href="#" class="right">»</a>
    </div>
</div>

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

[JavaScript] 纯文本查看 复制代码

$("#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()：停止移动图片。

      如：

     

[JavaScript] 纯文本查看 复制代码

$(document).ready(function() {[/align][align=left]var pano = $("#myPano").pano({[/align]                   img: "/path/to/image.jpg",
                        interval: 100,
                        speed: 50
                    });
                    pano.moveLeft();
                    pano.stopMoving();
                    pano.moveRight();
                    pano.stopMoving();
                });

点击查看更多精彩前端资源

点击有惊喜

查看演示

插件描述：jquery.pano.js是一款可以实现360度全景展示特效的jquery插件。该360度全景展示特效支持使用鼠标拖拽移动图片，也可以通过左右导航按钮来移动图片。

使用方法

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

[HTML] 纯文本查看 复制代码

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

二。360度全景展示特效的HTML结构如下：

[HTML] 纯文本查看 复制代码

<div id="myPano" class="pano">
    <div class="controls">
        <a href="#" class="left">«</a>
        <a href="#" class="right">»</a>
    </div>
</div>

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

[JavaScript] 纯文本查看 复制代码

$("#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()：停止移动图片。

      如：

     

[JavaScript] 纯文本查看 复制代码

$(document).ready(function() {[/align][align=left]var pano = $("#myPano").pano({[/align]                   img: "/path/to/image.jpg",
                        interval: 100,
                        speed: 50
                    });
                    pano.moveLeft();
                    pano.stopMoving();
                    pano.moveRight();
                    pano.stopMoving();
                });

点击查看更多精彩前端资源

点击有惊喜