jQuery.pan插件详细配置

来源:luqidong 发布时间:2014-02-07 20:34:07 点击数:

jQuery.pan是一个jQuery插件,封装了常用的基于鼠标的平移行为。虽然是相当配置的,它的目标是在合理的默认选项得到的东西快速启动和运行。

一个最小的例子如下所示。容器中装有被平移的内容。至通话('#集装箱')。锅()告诉jQuery.pan把容器的第一个子元素下平移控制。目前,绝对或相对的位置上,必须在容器和内容上的设置,得到预期的行为。当然,容器必须至少有一个尺寸比,以便看到平移行为的含量小。

 

<html>
    <head>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.github.com/mjfisheruk/jquery.pan/master/js/jquery.pan.js"></script>
        <style type="text/css">
            #container {
                position: relative;
                width: 250px;
                height: 250px;
                overflow: hidden;
            }            
            #content {
                position: absolute;
                width: 500px;
                height: 500px;
                background-image: url('https://raw.github.com/mjfisheruk/jquery.pan/master/img/tshirt.jpg');
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content"></div>
        </div>
        <script type="text/javascript">
            $('#container').pan();
        </script>
    </body>
</html>

请点击这里看demo

 

$('#container').pan({
    'mouseControl'    : 'kinetic', //默认可以平行移动

    'kineticDamping'  : 0.8        //较低的数字会导致内容出现停顿更快。
                                   //在零,内容会停下来后,立即在鼠标释放。
                                   //有一次,直到它到达一个边缘,内容也不会慢。
                                   //低于零或多个产生未定义(但有趣)的行为更高的数字。
});

 

$('#container').pan({
    'mouseControl'    : 'edge',   //使能边沿平移 

    'mouseEdgeSpeed'  : 5,        //速度的内容时,移动用户
                                  //将鼠标移动到所述容器的边缘 

    'mouseEdgeWidth'  : 100       //在容器内的鼠标敏感边框的像素宽度。默认为一季度的最小容器尺寸。 
                          
});

本文转载www.78oa.com 转载请著名出处