Native JS to achieve sliding button effect
|
The specific code of the sliding button made with Js is for your reference. The specific content is as follows First paste the effect picture
Paste the source code again
<!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>Knowledge points, production ideas and steps 1. Basic layout ( parent and child , left: 50%; top: 50%; transform: translateX(-50%) 2. The circle (cx) of svg controls the movement, and the cx of the circle is controlled by setAtrribute . 3. **Promise.then()** is used to ensure clearInterval after completion 4. circle listens to mousemove, mouseup, and mousedown events. When the mousedown event is triggered, cliked will be set to true and the move event will be reset; 5. mouseup and mouseleave will set cliked to false, thus failing to trigger the reset (stop) of the move event; 6. When in the stopped state, determine whether the origin is on the left or right side. Animation: If it is in the left half, use setInterval to move 1.5px each time for 10ms per frame, and stop when it reaches the start or end point. 7. Then switch the style. All the codes are original by me, please feel free to copy them. The codes have not been sorted out and there may be invalid variables. They just represent my ideas. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed explanation of the calculation method of flex-grow and flex-shrink in flex layout
>>: The benefits and examples of placing the site map at the bottom of the web page
Recommend
JavaScript to achieve a simple magnifying glass effect
There is a picture in a big box. When you put the...
How to use Font Awesome 5 in Vue development projects
Table of contents Install Dependencies Configurat...
Deeply understand the reason behind the prompt "No such file or directory" when executing a file in Linux
1 Background Recently, I have been studying how t...
Bootstrap 3.0 study notes for beginners
As the first article of this study note, we will ...
Introducing the code checking tool stylelint to share practical experience
Table of contents Preface text 1. Install styleli...
Website construction experience summary
<br />What principles should be followed to ...
Vue implements QR code scanning function (with style)
need: Use vue to realize QR code scanning; Plugin...
Solution to the problem that mixin does not work in scss (browser cannot compile it)
Mixin method: The browser cannot compile: The old...
Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)
The mysql on a server in the computer room had be...
Nine advanced methods for deduplicating JS arrays (proven and effective)
Preface The general methods are not listed here, ...
A brief discussion on the use of GROUP BY and HAVING in SQL statements
Before introducing the GROUP BY and HAVING clause...
Docker uses Git to implement the detailed process of Jenkins release and test projects
Table of contents 1. Install Docker 2. Create a c...
Comparative Analysis of IN and Exists in MySQL Statements
Background Recently, when writing SQL statements,...
The shortest JS to determine whether it is IE6 (IE writing method)
Commonly used JavaScript code to detect which ver...
How to create a responsive column chart using CSS Grid layout
I have been playing around with charts for a whil...