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>
$('#container').pan({
'mouseControl' : 'kinetic', //默认可以平行移动
'kineticDamping' : 0.8 //较低的数字会导致内容出现停顿更快。
//在零，内容会停下来后，立即在鼠标释放。
//有一次，直到它到达一个边缘，内容也不会慢。
//低于零或多个产生未定义（但有趣）的行为更高的数字。
});
$('#container').pan({
'mouseControl' : 'edge', //使能边沿平移
'mouseEdgeSpeed' : 5, //速度的内容时，移动用户
//将鼠标移动到所述容器的边缘
'mouseEdgeWidth' : 100 //在容器内的鼠标敏感边框的像素宽度。默认为一季度的最小容器尺寸。
});
本文转载www.78oa.com 转载请著名出处