scrollLeft() 妙用鼠标移动反方向图片滚动

时间：2015-04-25 15:10:14 阅读：143 评论：0 收藏：0 [点我收藏+]

标签：

实例：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>

scrollLeft() 妙用鼠标移动反方向图片滚动

标签：

原文地址：http://blog.csdn.net/xiaomogg/article/details/45270241

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

scrollLeft() 妙用 鼠标移动 反方向图片滚动

var left= e.clientX-$outer.offset().left;//当前鼠标位置减去最外层的div左边的距离 $outer.scrollLeft(left);//节点内部滚动 $outer.scrollLeft(left);

scrollLeft() 妙用鼠标移动反方向图片滚动

var left= e.clientX-$outer.offset().left;//当前鼠标位置减去最外层的div左边的距离
$outer.scrollLeft(left);//节点内部滚动
$outer.scrollLeft(left);