| 利用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、再进行样式切换。 代码本人全部原创,请尽情抄袭,代码写完没有经过整理,可能存在无效变量,仅仅代表我的思路。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
React中10种Hook的使用介绍
nodejs结合Socket.IO实现websocket即时通讯 |
