原生JS实现滑动按钮效果
更新时间：2021年11月14日 15:50:53 作者：reiyei.
这篇文章主要为大家详细介绍了原生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、再进行样式切换。
代码本人全部原创,请尽情抄袭,代码写完没有经过整理,可能存在无效变量,仅仅代表我的思路。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
关于JS作用域问题，是面试的时候面试官乐此不疲的面试题，有时候确实是令人抓狂，下面这篇文章主要给大家分享了关于javascript作用域的一些常见面试题，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
这篇文章主要为大家详细介绍了js实现自动轮播的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了.NET微信公众号开发之创建自定义菜单的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要给大家介绍了关于前端防止用户重复提交js实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧2018-09-09
js通过window.open(url)下载文件并修改文件名
这篇文章主要给大家介绍了关于js如何通过window.open(url)下载文件并修改文件名的相关资料,我们知道下载文件是一个非常常见的需求,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-08-08
本文介绍了JSscript标签有哪些属性,向HTML页面中插入JavaScript的主要方法,就是使用script>元素.这个元素由Netscape创造并在NetscapeNavigator2中首先实现.后来,这个元素被加入到正式的HTML规范中,下面小编来讲解下JSscript标签有哪些属性,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了JavaScript解析任意形式的json树型结构展示的相关资料,需要的朋友可以参考下2017-07-07
将秒换成时分秒的方法有很多，在本文将为大家介绍下，使用js的具体的实现思路，有需要的朋友可以参考下，希望对大家有所帮助2013-09-09
这篇文章主要为大家详细介绍了js实现带翻转动画的图片时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了微信小程序中时间戳和日期的相互转换问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
最新评论