小編給大家分享一下JavaScript實(shí)現(xiàn)水平進(jìn)度條拖拽效果的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供嵩縣企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、小程序制作等業(yè)務(wù)。10年已為嵩縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。
具體內(nèi)容如下
<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; // 拖動(dòng)一定寫到 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 = "已經(jīng)走了" + parseInt(barleft/(scroll.offsetWidth-bar.offsetWidth) * 100) + "%"; //防止選擇內(nèi)容--當(dāng)拖動(dòng)鼠標(biāo)過(guò)快時(shí)候,彈起鼠標(biāo),bar也會(huì)移動(dòng),修復(fù)bug window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } document.onmouseup = function(){ document.onmousemove = null; //彈起鼠標(biāo)不做任何操作 } </script> </body> </html>
效果圖:
以上是“JavaScript實(shí)現(xiàn)水平進(jìn)度條拖拽效果的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章標(biāo)題:JavaScript實(shí)現(xiàn)水平進(jìn)度條拖拽效果的方法
網(wǎng)頁(yè)路徑:http://muchs.cn/article2/ghsioc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站建設(shè)、定制網(wǎng)站、做網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、外貿(mào)建站、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容