scrollLeft() 妙用 鼠标移动 反方向图片滚动
浏览数：23 /
时间：2015年06月11日
实例：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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
