<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自己练习写一个滚动条</title> <style> *{ margin:0; padding: 0; } .scroll{ margin:200px; width:500px; height:5px; background: #ccc; position: relative; } .bar{ width:10px; height:20px; background: #369369; position: absolute; top:-7px; left:0; cursor: pointer; } .mask{ position: absolute; left:0; top:0; background: #369369; width:0px; height:5px; } </style></head><body> <div class="scroll" id="scroll"> <div class="bar" id="bar"></div> <div class="mask" id="mask"></div> </div> <p></p> <script> window.onload = function(){ var scroll = document.getElementById(‘scroll‘); var bar = document.getElementById(‘bar‘); var mask = document.getElementById(‘mask‘); var ptxt = document.getElementsByTagName(‘p‘)[0]; bar.onmousedown = function (event){ // Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 // 事件通常与函数结合使用，函数不会在事件发生前被执行！ var event = event || window.event; //相对于浏览器的x轴距离，，， 相对于父元素的左内边距的距离 // 获取到点击轴的距离屏幕的距离 var leftVal = event.clientX - this.offsetLeft; console.log(leftVal); var that = this; //拖动 document.onmousemove = function(event){ var event = event || window.event; // 获取移动的x轴距离，可能是正值，负值， var barleft = event.clientX-leftVal; //console.log(barleft); console.log(scroll.offsetWidth); console.log(bar.offsetWidth) if(barleft<0){ barleft = 0; //offsetWidth：元素在水平方向上占据的大小，无单位 }else if(barleft > scroll.offsetWidth - bar.offsetWidth){ barleft = scroll.offsetWidth - bar.offsetWidth;
} mask.style.width = barleft+‘px‘; that.style.left = barleft+‘px‘; ptxt.innerHTML = ‘已经走啦‘ + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth)*100)+‘%‘; //获取光标的当前位置，这个是兼容写法，后面的是ie8及以下的，
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } }; document.onmouseup = function(){ document.onmousemove = null; //弹起鼠标不做任何操作 } } </script></body></html>
原文地址：https://www.cnblogs.com/lieaiwen/p/9547774.html
时间： 2024-11-10 11:51:42