在前面一篇说的是滚动条效果，本篇继续在前面的基础上面针对滚动条进行操作。本次要实现的效果如下：拖动滚动条左右移动时，上面的图片内容也相对外层盒子做相对移动。
下面针对要实现的效果进行分析：首先是页面基础结构，要实现内容的相对移动，里面的内容需要针对外层盒子相对定位，宽度应该大于外层盒子，而且外层盒子应该超出隐藏。下面是一个滚动条，由底层和滚动两部分组成。
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 list-style: none; 11 border:none; 12 } 13 14 #box{ 15 width: 800px; 16 height: 200px; 17 border: 1px solid #ddd; 18 position: relative; 19 margin: 100px auto; 20 overflow: hidden; 21 } 22 23 #box ul{ 24 width: 2600px; 25 position: absolute; 26 left: 0; 27 top: 20px; 28 } 29 30 #box ul li{ 31 float: left; 32 } 33 34 #box_bottom{ 35 position: absolute; 36 left: 0; 37 bottom: 0; 38 background-color: #e8e8e8; 39 width: 100%; 40 height: 25px; 41 } 42 43 .mask{ 44 position: absolute; 45 left: 0; 46 top:0; 47 height: 25px; width:100px; 48 background-color: #aaa; 49 border-radius: 12px; 50 cursor: pointer; 51 } 52 </style> 53</head> 54<body> 55 <div id="box"> 56 <ul id="box_top"> 57 <li><img src="images/img1.jpg" alt=""></li> 58 <li><img src="images/img2.jpg" alt=""></li> 59 <li><img src="images/img3.jpg" alt=""></li> 60 <li><img src="images/img4.jpg" alt=""></li> 61 <li><img src="images/img5.jpg" alt=""></li> 62 <li><img src="images/img6.jpg" alt=""></li> 63 <li><img src="images/img7.jpg" alt=""></li> 64 <li><img src="images/img8.jpg" alt=""></li> 65 <li><img src="images/img1.jpg" alt=""></li> 66 <li><img src="images/img2.jpg" alt=""></li> 67 <li><img src="images/img1.jpg" alt=""></li> 68 <li><img src="images/img2.jpg" alt=""></li> 69 <li><img src="images/img3.jpg" alt=""></li> 70 <li><img src="images/img4.jpg" alt=""></li> 71 <li><img src="images/img5.jpg" alt=""></li> 72 <li><img src="images/img6.jpg" alt=""></li> 73 <li><img src="images/img7.jpg" alt=""></li> 74 <li><img src="images/img8.jpg" alt=""></li> 75 <li><img src="images/img1.jpg" alt=""></li> 76 <li><img src="images/img2.jpg" alt=""></li> 77 </ul> 78 <div id="box_bottom"> 79 <span class="mask"></span> 80 </div> 81 </div> 82</body> 83</html>
此时我们已经实现了基础的页面效果，但是，需要注意的时，在上面的效果中，我们为滚动条设置了滚动宽度，但是在实际过程中，当外层盒子宽度固定时，滚动内容越长，滚动条会越短。为了实现拖动滚动条时，内容相对运动，在滚动条和内容之间存在着一定的比例关系：滚动条 / 盒子的长度 = 盒子的长度 / 内容的长度，因此，我们首先需要根据这个关系计算出滚动条实际的宽度。
1<script> 2 window.onload = function () { 3 //获取需要的标签 4 var box = document.getElementById("box"); 5 var box_top = document.getElementById("box_top"); 6 var box_bottom = document.getElementById("box_bottom"); 7 var mask = box_bottom.children[0]; 8 9 //滚动条的长度 10 // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度 11 var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth; 12 mask.style.width = mask_len + 'px'; 13 } 14</script>
接下来就需要监听鼠标事件了，首先是鼠标的移入事件，当鼠标移入时，记录鼠标相对于盒子左边的距离，当鼠标移动时，根据鼠标的移动距离，改变滚动条的位置，实现滚动效果，同时需要计算出内容相对需要滚动的距离，最后就是鼠标移出事件，当鼠标移出时，清空事件。
其中，在滚动条移动和内容滚动之间也存在一个换算关系：内容走的距离 / 滚动条走的距离 = （内容的长度 - 盒子的长度）/ （盒子长度 - 滚动条的长度）。因此，当我们计算处了滚动条走的距离后，就可以得出内容走的距离了。
1 //鼠标事件 2 mask.onmousedown = function (event) { 3 var e = event || window.event; 4 5 //求出初始值 6 var beginX = e.clientX - mask.offsetLeft; 7 8 document.onmousemove = function (event) { 9 var e = event || window.event; 10 11 //求出移动的距离 12 var endX = event.clientX - beginX; 13 14 // 滚动边界值 15 if(endX < 0){ 16 endX = 0; 17 }else if(endX >= box.offsetWidth - mask.offsetWidth){ 18 endX = box.offsetWidth - mask.offsetWidth; 19 } 20 21 22 //运动效果 23 mask.style.left = endX + 'px'; 24 25 // 内容走的距离 = （内容的长度 - 盒子的长度） \/ (盒子长度 - 滚动条的长度) * 滚动条走的距离 26 var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX; 27 box_top.style.left = -content_len + 'px'; 28 29 return false; 30 }; 31 32 document.onmouseup = function () { 33 document.onmousemove = null; 34 } 35 }
只需要把握住盒子，滚动条，内容之间的换算关系，计算处相对运动距离，上面的效果就可以轻松实现了。
完整代码下载：点这里