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

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

7、再进行样式切换。

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

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

时间: 2021-11-11

js仿QQ中对联系人向左滑动、滑出删除按钮的操作

本文实例为大家分享实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

基于JS实现移动端向左滑动出现删除按钮功能

最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

JS如何实现封装列表右滑动删除收藏按钮

前言 列表右滑动展示删除和收藏按钮就类似微信或者美团饿了吗的列表,右滑动出现指定的按钮功能: 本来我是想把前几年支付宝的一个机试题拿来讲,奈何我记不太清题目,也找不到当时做的题了,所以只好将就一下那这个案例来讲解,其实解题思路大致是一样的,毕竟作为程序员最重要的不是会多少框架和会用api用的多熟练,设计思路才是最重要! 案例 这个界面相信大家都非常熟悉,很多时候一些封装好的插件可以拿来用即可实现这个功能,算是比较大众化,不过为了给不了解原理的小伙伴们讲解,所以自己用dom手写了一个,思路如下:

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控制不同的时间段显示不同的css样式的实例代码

js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 复制代码 代码如下: function getCSS(){        datetoday = new Date();        timenow=datetoday.getTime();        datetoday.setTime(timenow);        thehour = datetoday.getHours();        if (thehour<12)            disp

原生JS实现顶部导航栏显示按钮+搜索框功能

根据点击导航栏,搜索框的内容会随之变动 话不多说,先上图 HTML代码段 <div class="bar"> <ul id="menu" class="menu"> <li class="active">搜店</li> <li class="gradient">地址</li> <li class="gradient&qu

JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析

本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法.分享给大家供大家参考,具体如下: 在web开发中,上传文件功能通过type为file的input标签即可实现.但input的显示效果仅为一个按钮,且不能修改UI.如果要实现自定义上传按钮,一般需要设置input为不可见,然后将input与自定义界面放在同一个div中,并将input铺在界面上方: <!DOCTYPE html> <html> <head> <meta http-equiv=&q

js隐藏与显示回到顶部按钮及window.onscroll事件应用

现在大多数网站都会添加这种功能:当滚动条滚动到页面的下方时,页面的右下角会显示出来一个"回到顶部"的按钮或连接,点击该按钮后页面会跳转到顶部,或某一个适合查看内容的位置. 那么,如何控制"回到顶部"按钮的显示或隐藏呢?其实我们只需要实现window.onscroll 事件即可,代码如下: 复制代码 代码如下: window.onscroll = function () { if (document.documentElement.scrollTop + docume

BootStrap栅格系统、表单样式与按钮样式源码解析

栅格系统 1.栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. Bootstrap的栅格系统,由一个行(.row)和多个列构成. 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的网页布局中.具体的数据(文字.图片等都可以)放入列当中. 注意:栅格系统,必须放在.container(固定宽度)或.container-fluid(100%

关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案

关于Lodop打印是个很牛逼的打印插件,但是打印Bootstrap的样式的时候很恶心 比如:页面是这样 打印之后的效果恶心的不要不要的 单独修改后的样式 出现这样的问题就是可能是bs把这个插件当做手机显示了,也可能是这样插件对bs集成不行 lodop对常规html+css还是不错的,下面丢上bs版的代码 控件对应html+js使用代码 <%@ Control Language="C#" AutoEventWireup="true" CodeBehind=&qu

通过js为元素添加多项样式,浏览器全兼容写法

js给元素添加多项样式,浏览器全兼容示例写法: <a href="javascript:;" id="test" style="font-size:25px;background:#080;">测试3</a> <script> var obj=document.getElementById("test"); var oldStyle=obj.style.cssText; alert(oldS

js小数计算小数点后显示多位小数的实现方法

首先写一个demo 重现问题,我使用的是一个js在线测试环境[打开] 改写displaynum()函数 function displaynum(){var num = 22.77;alert(num + 10);} 点击Show按钮 结果显示32.769999999996 出现了N多小数. 也并不是所有数字都会出现这种现象, 除了 22.99  2.777 , 好像这几个数字也没什么特殊. 查了一些资料, 一是JS浮点数计算的bug, 另一个是和计算机最终转换成二进制计算有关系, 但是为什么不是

Vue.js 使用v-cloak后仍显示变量的解决方法

Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原