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

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

html head meta charset=' UTF-8 '标题文档/标题样式* { margin : 0；padd : 0；} .滚动{ margin:100px宽度： 500像素；高度： 5px背景# ccc相对位置：} .酒吧{宽度： 10像素重量： 20像素背景技术： # 369;绝对位置：top :-7px；左： 0；光标：指针；} .掩模{位置：绝对值；左： 0；top : 0；背景技术： # 369;宽度： 0;height : 5px }/style/head body div class=' scroll ' id=' scroll ' div class=' bar ' id=' bar '/div class=' mask ' id=' mask '/div/div p/p脚本var scroll=文档。getelementbyid('滚动')；var bar=文档。getelementbyid(' bar ')；var mask=文档。getelementbyid(' mask ')；var ptxt=文档。getelementsbytagname(' p ')[0]；var bar left=0；酒吧。onmousedown=function(event){ var event=event | | window。事件；var左val=事件。client x-这个。offsetleft变量=这个；//拖动一定写到向下里面才可以文件。onmousemove=function(event){ var event=event | | window。事件；左栏=事件。客户端x-LeftVal；if(bar left 0)bar left=0；else if(向左滚动滚动条。用-bar偏移。向左偏移)条=滚动。用-bar偏移。用.抵消；面具。风格。宽度=左栏“px”；那个。风格。left=左栏“px”；' ptxt.innerHTML='已经走了parsent(左栏/(滚动。在酒吧外面。offset withts)* 100)' % '；//防止选择内容-当拖动鼠标过快时候，弹起鼠标，酒吧也会移动，修复bug window.getSelection？window.getSelection().removeAllRanges():文档。选择。empty()；} }文档。onmouseup=function(){ document。onmousemove=null//弹起鼠标不做任何操作}/脚本/正文/html效果图：

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