原生JS實現滑動按鈕效果
利用Js制作的滑動按鈕的具體代碼,供大傢參考,具體內容如下
首先貼上效果圖
再貼上源碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div style="position: relative;width:100vw;height:100vh"> <div id="container"> <svg style="width:inherit;height:inherit"> <circle id="c" cx="25" cy="25" r="23" style="fill:white; stroke:gray; stroke-width:2;" onmousedown="down(event)" onmouseup="up(event)" onmouseleave="up(event)" /> </svg> </div> </div> <!-- <script> setTimeout(function () { let c = document.querySelector('circle'); console.log(c.parentNode.parentNode.style) },500) </script> --> <style> body{ margin:0; background-color:azure; } #container{ position:absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 200px; height: 50px; background-color: black; border-radius: 50px; } </style> <script> let circle = document.getElementById('c'), clicked = false, x = 0,y = 0; circle.addEventListener("mousemove",function(e){ x = e.offsetX; if(clicked){ circle.setAttribute("cx",x) } }) function t(e){ circle.setAttribute("cx",e.offsetX); } function down(e){ clicked = true; } function up(){ if(clicked){ let flag; if(x <= 100) new Promise(function(resolve,reject){ flag = setInterval(function(){ x -= 2; circle.setAttribute("cx",x); if(x <= 25){ circle.setAttribute("cx",25) circle.setAttribute("style","fill:white; stroke:gray; stroke-width:2;") resolve("ok") } }) }).then(res => { clearInterval(flag) }) else new Promise(function(resolve,reject){ flag = setInterval(function(){ x += 2; circle.setAttribute("cx",x); if(x >= 175){ circle.setAttribute("cx",175); circle.setAttribute("style","fill:black; stroke:gray; stroke-width:2;") resolve("ok") } }) }).then(res => { clearInterval(flag) }) } clicked = false; } </script> </body> </html>
知識點和制作思路及步驟
1、基本佈局(父相子絕,left: 50%; top: 50%; transform: translateX(-50%)
translateY(-50%);)
2、svg的circle( cx )控制移動, 對於circle的cx采用setAtrribute來進行控制。
3、**Promise.then()**用來保證結束後進行clearInterval
4、circle監聽瞭mousemove,mouseup,mousedown事件。 當mousedown事件觸發會將cliked置為true進而move事件會進行reset;
5、mouseup和mouseleave會將cliked置為false;進而無法觸發move事件的reset(停止);
6、當停止狀態下,判斷原點在左側還是右側, 動畫: 如果在左半部分則利用setInterval進行10ms一幀每次1.5px的移動,判斷到達開始或者結束點則停止。
7、再進行樣式切換。
代碼本人全部原創,請盡情抄襲,代碼寫完沒有經過整理,可能存在無效變量,僅僅代表我的思路。
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- js canvas實現圓角圖片
- 利用svg實現帶加載進度的loading
- JavaScript實現鼠標移動事件畫筆
- 關於javascript中的promise的用法和註意事項(推薦)
- vue3使用canvas的詳細指南