您好,登錄后才能下訂單哦!
小編給大家分享一下原生js怎么實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體如下:
該插件最初的想法來(lái)自網(wǎng)上的一篇文章,直達(dá)鏈接://www.jb51.net/article/167717.htm
筆者因?yàn)闃I(yè)務(wù)需要尋找到這個(gè)插件,然后拿來(lái)用之,發(fā)現(xiàn)各種不方便,然后便開(kāi)始了改造之路。
上代碼:
<script> function dragSlide(id) { this.minDiv =document.getElementById(id); //小方塊 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方塊的寬度 this.lineDiv = this.minDiv.parentNode; //長(zhǎng)線條 //滑動(dòng)的數(shù)值呈現(xiàn) this.vals = this.minDiv.children[0]; var that=this; var move = function(e) { var x = e.touches[0].pageX; var lineDiv_left = that.getPosition(that.lineDiv).left; //長(zhǎng)線條的橫坐標(biāo) var minDiv_left = x - lineDiv_left; //小方塊相對(duì)于父元素(長(zhǎng)線條)的left值 if (minDiv_left >= that.lineDiv.offsetWidth - that.width) { minDiv_left = that.lineDiv.offsetWidth - that.width; } if (minDiv_left <0 ) { minDiv_left = 0; } //設(shè)置拖動(dòng)后小方塊的left值 that.minDiv.style.left = minDiv_left + "px"; //percent百分比改為如下所示,解決開(kāi)始和最后滑動(dòng)的體驗(yàn)不好問(wèn)題 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100; if (percent > 0 && percent < 0.5) { percent = Math.ceil(percent); } else { percent = Math.floor(percent); } that.vals.innerText = percent; } //獲取元素的絕對(duì)位置,工具函數(shù) this.getPosition = function(node) { var left = node.offsetLeft; //獲取元素相對(duì)于其父元素的left值var left var top = node.offsetTop; current = node.offsetParent; // 取得元素的offsetParent // 一直循環(huán)直到根元素 while (current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; } return { "left": left, "top": top }; } this.minDiv.addEventListener("touchmove", move); } var drag0 = new dragSlide("minDiv"); var drag1 = new dragSlide("minDiv1"); //取消移動(dòng)端手勢(shì)長(zhǎng)按彈出提示框的操作 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }); </script>
html和css部分沒(méi)有改動(dòng),而js改動(dòng)還是很大的,比較原來(lái)作者的文章,改動(dòng)點(diǎn)如下
1)整體上,原來(lái)不是插件,改造之后成為一個(gè)可以復(fù)用的插件,雖然簡(jiǎn)單了點(diǎn)
2)只是將其改造為適用于移動(dòng)端的插件
3)通過(guò)對(duì)開(kāi)始滑動(dòng)和結(jié)束滑動(dòng)比例的處理,優(yōu)化了開(kāi)始滑動(dòng)和結(jié)束滑動(dòng)的體驗(yàn)
4)移動(dòng)端加了防止長(zhǎng)按彈出提示框的代碼
5)小滑塊的寬度改為動(dòng)態(tài)
改造之后的整體案例,需要指出:筆者主要用在微信端,至于其他瀏覽器滑塊的體驗(yàn)不是很好,還有滑塊滑動(dòng)體驗(yàn)跟小塊的尺寸有直接關(guān)系。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>鼠標(biāo)拖動(dòng)小方塊</title> <style type="text/css"> .lineDiv { position: relative; height: 5px; background: red; width: 300px; margin: 50px auto; } .lineDiv .minDiv { position: absolute; top: -12.5px; left: 0; width: 30px; height: 30px; background: green; cursor: pointer } .lineDiv .minDiv .vals { position: absolute; font-size: 20px; top: -45px; left: -2.5px; width: 35px; height: 35px; line-height: 35px; text-align: center; background: blue; } .lineDiv .minDiv .vals:after { content: ""; width: 0px; height: 0px; border-top: 6px solid blue; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid transparent; display: block; margin-left: 11px; } * { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body> <center> <h4>用鼠標(biāo)拖動(dòng)小方塊<span id="msg">0</span>%</h4> </center> <div id="lineDiv" class="lineDiv"> <div id="minDiv" class="minDiv"> <div id="vals" class="vals">0</div> </div> </div> <div ></div> <div id="lineDiv" class="lineDiv"> <div id="minDiv1" class="minDiv"> <div id="vals" class="vals">0</div> </div> </div> <script> //避免默認(rèn)事件 2018.7.10 更新 優(yōu)化uc瀏覽器左右滑動(dòng)時(shí)候頁(yè)面被拖動(dòng) document.addEventListener('touchmove', function(e) { e.preventDefault(); }, { passive: false }); function dragSlide(id) { this.minDiv = document.getElementById(id); //小方塊 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方塊的寬度 this.lineDiv = this.minDiv.parentNode; //長(zhǎng)線條 //滑動(dòng)的數(shù)值呈現(xiàn) this.vals = this.minDiv.children[0]; var that = this; var lastX = null; //判斷鼠標(biāo)移動(dòng)方向,解決向左側(cè)滑動(dòng)時(shí)候的bug var move = function(e) { var x = e.touches[0].pageX, direction = ''; if (lastX == null) { lastX = x; return; } if (x > lastX) { direction = 'right'; } else if (x < lastX) { direction = 'left'; } else { direction = ''; } var lineDiv_left = that.getPosition(that.lineDiv).left; //長(zhǎng)線條的橫坐標(biāo) var minDiv_left = x - lineDiv_left; //小方塊相對(duì)于父元素(長(zhǎng)線條)的left值 if (minDiv_left >= that.lineDiv.offsetWidth - that.width) { minDiv_left = that.lineDiv.offsetWidth - that.width; } if (minDiv_left < 0) { minDiv_left = 0; } //設(shè)置拖動(dòng)后小方塊的left值 that.minDiv.style.left = minDiv_left + "px"; //percent百分比改為如下所示,解決開(kāi)始和最后滑動(dòng)的體驗(yàn)不好問(wèn)題 var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100; if (percent < 0.5 && direction == 'right') { percent = Math.ceil(percent); } else if (percent > 0.5 && direction == 'right') { percent = Math.floor(percent); } else { percent = Math.ceil(percent); } that.vals.innerText = percent; } //獲取元素的絕對(duì)位置,工具函數(shù) this.getPosition = function(node) { var left = node.offsetLeft; //獲取元素相對(duì)于其父元素的left值var left var top = node.offsetTop; current = node.offsetParent; // 取得元素的offsetParent // 一直循環(huán)直到根元素 while (current != null) { left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; } return { "left": left, "top": top }; } this.minDiv.addEventListener("touchmove", move); } var drag0 = new dragSlide("minDiv"); var drag1 = new dragSlide("minDiv1"); //取消移動(dòng)端手勢(shì)長(zhǎng)按彈出提示框的操作 document.addEventListener('contextmenu', function(e) { e.preventDefault(); }); </script> </body> </html>
以上是“原生js怎么實(shí)現(xiàn)的移動(dòng)端可拖動(dòng)進(jìn)度條插件功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。