• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

原生JS实现滑动按钮效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

利用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、mouseupmouseleave会将cliked置为false;进而无法触发move事件的reset(停止);

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

7、再进行样式切换。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React中10种Hook的使用介绍发布时间:2022-02-05
下一篇:
nodejs结合Socket.IO实现websocket即时通讯发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap