原生JS实现滑动按钮效果
程序员文章站
2022-03-25 23:24:59
利用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、再进行样式切换。
代码本人全部原创,请尽情抄袭,代码写完没有经过整理,可能存在无效变量,仅仅代表我的思路。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： C语言 八大排序算法的过程图解及实现代码