利用原生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>

知识点和制作思路及步骤

基本布局（父相子绝,left: 50%; top: 50%; transform: translateX(-50%)
translateY(-50%);）

svg的circle( cx )控制移动，对于circle的cx采用setAtrribute来进行控制。

**Promise.then()**用来保证结束后进行clearInterval

circle监听了mousemove,mouseup,mousedown事件。当mousedown事件触发会将cliked置为true进而move事件会进行reset；

mouseup和mouseleave会将cliked置为false；进而无法触发move事件的reset（停止）；

当停止状态下，判断原点在左侧还是右侧，动画：如果在左半部分则利用setInterval进行10ms一帧每次1.5px的移动，判断到达开始或者结束点则停止。

再进行样式切换。

代码本人全部原创,请尽情抄袭,
代码写完没有经过整理,可能存在无效变量,仅仅代表我的思路。

利用原生Js制作的滑动按钮相关推荐

利用原生js制作小游戏
1.编写函数: 该函数对游戏间隔时间.影响游戏的对象的绑定.开始.结束进行编写 /*** * @param {*} duration 间隔时间* @param {*} thisObj 绑定的this对 ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
原生js制作简易DOM拾色器实例教程
本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作,实例效果如下图所示. 可以看到实例中的拾色器分为三个部分:拾色区域.色系区域.显示颜色区域.先写出这三个部分的html代码,如下所示: &l ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
html 对勾单选框,利用原生js和jQuery实现单选框的勾选和取消操作的方法
根据以下的Demo,大概就可以看的明白 Demo: window.onload = function(){ var dom_a = document.getElementById('a1'); var ...
原生js实现点击按钮切换全屏！
使用fullScreen API实现全屏 <head><meta charset="UTF-8"><meta name="viewport& ...

利用原生Js制作的滑动按钮

利用Js制作的滑动按钮

知识点和制作思路及步骤

利用原生Js制作的滑动按钮相关推荐

最新文章

热门文章