1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * {margin:0;padding:0;} 8 .scroll { 9 width: 400px; 10 height: 8px; 11 background-color: #ccc; 12 margin: 100px; 13 position: relative; 14 15 } 16 .bar { 17 width: 10px; 18 height: 22px; 19 background-color: #369; 20 position: absolute; 21 top: -7px; 22 left: 0; 23 cursor: pointer; 24 } 25 .mask { 26 width: 0; 27 height: 100%; 28 background-color: #369; 29 position: absolute; 30 top: 0; 31 left: 0; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="scroll" id="scrollBar"> 37 <div class="bar"></div> 38 <div class="mask"></div> 39 </div> 40 <div id="demo"></div> 41 </body> 42 </html> 43 <script> 44 var scrollBar = document.getElementById("scrollBar"); 45 var bar = scrollBar.children[0]; 46 var mask = scrollBar.children[1]; 47 var demo = document.getElementById("demo"); 48 /* document.onmousedown = function() { 49 alert(11); 50 }*/ 51 bar.onmousedown = function(event) { 52 var event = event || window.event; 53 var leftVal = event.clientX - this.offsetLeft; 54 // alert(11); 55 // 拖动一定写到 down 里面才可以 56 var that = this; 57 document.onmousemove = function(event) { 58 var event = event || window.event; 59 that.style.left = event.clientX - leftVal + 'px'; 60 //alert(that.style.left); 61 var val = parseInt(that.style.left); 62 if(val < 0) 63 { 64 that.style.left = 0; 65 } else if(val > 390) 66 { 67 that.style.left = "390px"; 68 } 69 mask.style.width = that.style.left; // 遮罩盒子的宽度 70 //计算百分比 71 demo.innerHTML = "已经走了:"+ parseInt(parseInt(that.style.left) / 390 * 100) + "%"; 72 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); 73 } 74 document.onmouseup = function() { 75 document.onmousemove = null; // 弹起鼠标不做任何操作 76 } 77 } 78 79 </script>