JavaScript实现水平进度条拖拽效果

本文实例为大家分享水平进度条拖拽效果的js具体代码，供大家参考，具体内容如下

<html><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.scroll{margin:100px;width: 500px;height: 5px;background: #ccc;position: relative;}.bar{width: 10px;height: 20px;background: #369;position: absolute;top: -7px;left: 0;cursor: pointer;}.mask{position: absolute;left: 0;top: 0;background: #369;width: 0;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>var scroll = document.getElementById（"scroll"）;var bar = document.getElementById（"bar"）;var mask = document.getElementById（"mask"）;var ptxt = document.getElementsByTagName（"p"）[0];var barleft = 0;bar.onmousedown = function（event）{var event = event || window.event;var leftVal = event.clientX - this.offsetLeft;var that = this; // 拖动一定写到 down 里面才可以document.onmousemove = function（event）{var event = event || window.event;barleft = event.clientX - leftVal; if（barleft < 0）barleft = 0;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） + "%";//防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bugwindow.getSelection ? window.getSelection（）.removeAllRanges（） : document.selection.empty（）;}}document.onmouseup = function（）{document.onmousemove = null; //弹起鼠标不做任何操作}</script></body></html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。