商品展示滚动条及算法

  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 
 19             position: relative;
 20             margin: 100px auto;
 21 
 22             overflow: hidden;
 23         }
 24 
 25         #box ul{
 26             width: 2600px;
 27             position: absolute;
 28             left: 0;
 29             top: 20px;
 30         }
 31 
 32         #box ul li{
 33             float: left;
 34         }
 35 
 36         #box_bottom{
 37             position: absolute;
 38             left: 0;
 39             bottom: 0;
 40             background-color: #e8e8e8;
 41 
 42             width: 100%;
 43             height: 25px;
 44         }
 45 
 46         .mask{
 47             position: absolute;
 48             left: 0;
 49             top:0;
 50             height: 25px;
 51             background-color: orangered;
 52             border-radius: 12px;
 53             cursor: pointer;
 54         }
 55     </style>
 56 </head>
 57 <body>
 58     <div id="box">
 59         <ul id="box_top">
 60             <li><img src="images/img1.jpg" alt=""></li>
 61             <li><img src="images/img2.jpg" alt=""></li>
 62             <li><img src="images/img3.jpg" alt=""></li>
 63             <li><img src="images/img4.jpg" alt=""></li>
 64             <li><img src="images/img5.jpg" alt=""></li>
 65             <li><img src="images/img6.jpg" alt=""></li>
 66             <li><img src="images/img7.jpg" alt=""></li>
 67             <li><img src="images/img8.jpg" alt=""></li>
 68             <li><img src="images/img1.jpg" alt=""></li>
 69             <li><img src="images/img2.jpg" alt=""></li>
 70             <li><img src="images/img1.jpg" alt=""></li>
 71             <li><img src="images/img2.jpg" alt=""></li>
 72             <li><img src="images/img3.jpg" alt=""></li>
 73             <li><img src="images/img4.jpg" alt=""></li>
 74             <li><img src="images/img5.jpg" alt=""></li>
 75             <li><img src="images/img6.jpg" alt=""></li>
 76             <li><img src="images/img7.jpg" alt=""></li>
 77             <li><img src="images/img8.jpg" alt=""></li>
 78             <li><img src="images/img1.jpg" alt=""></li>
 79             <li><img src="images/img2.jpg" alt=""></li>
 80         </ul>
 81         <div id="box_bottom">
 82             <span class="mask"></span>
 83         </div>
 84     </div>
 85 
 86 <script>
 87     window.onload = function () {
 88         // 1. 获取需要的标签
 89         var box = document.getElementById("box");
 90         var box_top = document.getElementById("box_top");
 91         var box_bottom = document.getElementById("box_bottom");
 92         var mask = box_bottom.children[0];
 93 
 94         // 2. 设置滚动条的长度
 95         // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
 96         var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
 97         mask.style.width = mask_len + 'px';
 98 
 99         // 3. 鼠标操作
100         mask.onmousedown = function (event) {
101             var e = event || window.event;
102 
103             // 3.1 求出初始值
104             var beginX = e.clientX - mask.offsetLeft;
105 
106             // 3.2 移动
107             document.onmousemove = function (event) {
108                 var e = event || window.event;
109 
110                 // 3.3 求出移动的距离
111                 var endX = event.clientX - beginX;
112 
113                 // 边界值
114                 if(endX < 0){
115                     endX = 0;
116                 }else if(endX >= box.offsetWidth - mask.offsetWidth){
117                     endX = box.offsetWidth - mask.offsetWidth;
118                 }
119 
120 
121                 // 3.4 动起来
122                 mask.style.left = endX + 'px';
123 
124                 // 内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
125                 var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
126                 box_top.style.left = -content_len + 'px';
127 
128                 return false;
129             };
130 
131             document.onmouseup = function () {
132                 document.onmousemove = null;
133             }
134         }
135     }
136 </script>
137 </body>
138 </html>