JavaScript實現水平進度條拖拽效果

2019-11-19 17:52:27

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享水平進度條拖拽效果的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也會移動，修復bug        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();      }    }    document.onmouseup = function(){      document.onmousemove = null; //彈起鼠標不做任何操作    }  </script></body></html>

效果圖：