实例：http://www.lcefox.com.cn//page/single/mousemove/
scrollLeft，平时我们是比较少使用的 不过不常使用不代表就不能用，其实运动 得当能够省去很多代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
html,body{width:100%;height:100%;overflow: hidden;}
ul{list-style: none;}
li{float:left;width:180px;height:120px;opacity: 0.8;}
li:hover{opacity: 1;}
.box{margin:200px auto;height:180px;width:720px;overflow: hidden;}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var extra=800;
var $inner=$("ul");
var $outer=$(".box");
var lastElem = $inner.find(‘img:last‘);
var divWidth=$outer.width();
$outer.scrollLeft(0);
$inner.width($("li").width()*$("li").width());
$outer.unbind(‘mousemove‘).bind(‘mousemove‘,function(e){
var left= e.clientX-$outer.offset().left;//当前鼠标位置减去最外层的div左边的距离
$outer.scrollLeft(left);//节点内部滚动
$outer.scrollLeft(left);
});
});
</script>
</body>
</html>