原生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如何实现封装列表右滑动删除收藏按钮
前言 列表右滑动展示删除和收藏按钮就类似微信或者美团饿了吗的列表,右滑动出现指定的按钮功能: 本来我是想把前几年支付宝的一个机试题拿来讲,奈何我记不太清题目,也找不到当时做的题了,所以只好将就一下那这个案例来讲解,其实解题思路大致是一样的,毕竟作为程序员最重要的不是会多少框架和会用api用的多熟练,设计思路才是最重要! 案例 这个界面相信大家都非常熟悉,很多时候一些封装好的插件可以拿来用即可实现这个功能,算是比较大众化,不过为了给不了解原理的小伙伴们讲解,所以自己用dom手写了一个,思路如下:
-
基于JS实现移动端向左滑动出现删除按钮功能
最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事
-
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
-
js通过更改按钮的显示样式实现按钮的滑动效果
通过更改按钮的显示样式,来实现按钮动态滑动 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &
-
原生JS实现滑动按钮效果
利用Js制作的滑动按钮的具体代码,供大家参考,具体内容如下 首先贴上效果图 再贴上源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view
-
JS实现滑动门效果的方法详解
本文实例讲述了JS实现滑动门效果的方法.分享给大家供大家参考,具体如下: 描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌,效果图如下: 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未显露的部分) 3.绑定鼠标滑过事件 window.onload=function(){ var box=document.getElementById("box"); var img=box.getEl
-
原生JS实现轮播效果+学前端的感受(防止走火入魔)
插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以无视下面这段废话: 在开始之前,先说下我学前端到现在的一点感受.到今天应该有两个月左右了吧,基本每天6-10小时的学习时间,纯自学,据说培训不靠谱!本人目前的阶段是只会三大件(HTML5.CSS3.javascript),其它所有知识都还排在学习计划后面....现在正处在迷茫期,不知道下面该先学什么
-
原生JS实现的放大镜效果实例代码
这是我用原生js写的放大镜效果,与各种各样的框架技术相比,我喜欢使用原生的js,在这里,想和大家一起谈谈原生和框架技术的理解与个人喜好. <!DOCTYPE HTML> <html> <head> <title>js放大镜效果</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <style
-
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS实现滑动导航效果
本文实例为大家分享了JS实现滑动导航效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
-
原生js实现波浪导航效果
本文实例为大家分享了原生js实现波浪导航效果的具体代码,供大家参考,具体内容如下 展示效果: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js波浪导航</title> <style> * {undefined margin:0; padding:0; font-family:"微软
-
原生JS实现简单放大镜效果
本文实例为大家分享了原生JS实现放大镜效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } img{ vertical-align: top; } .fdj { width: 350px; heig
-
原生js+canvas实现下雪效果
本文实例为大家分享了js+canvas实现下雪效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas下雪效果(原生js)</title> <style> * { margin: 0; padding: 0 } html, body { width: 100%;
-
原生js编写焦点图效果
自己用原生js写的简单焦点图,算是对原生js初步运用. html部分 <div class="focusPicture"> <section class="mPhoto" id="mPhoto"> <img src="images/20161021/b_5809b93b66d18.jpg"/> </section><!-- 主要的大图 --> <section