原生JS 小球滑块（Slider 滑块）

Slider 滑块（两种方式）

通过拖动滑块在一个固定区间内进行滑动

第一种

<!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>
    <style>
      body{
        margin: 50px 0 ;
      }
        .box {
            width: 500px;
            height: 10px;
            background-color: #ccc;
            margin: 100px 0 0 100px;
            position: relative;
            border-radius: 5px;
        
        }
        .ball,
        .ball2 {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: skyblue;
            border: 2px solid blue;
            border-radius: 50%;
        }
        .ball2 {
            left: 480px;
            background-color: skyblue;
        }
        .slide {
            height: 100%;
            width: 0;
            position: absolute;
            top: 0;
            left: 0;
            background-color: blue;
        }

        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="slide"></div>
        <div class="ball" ball></div>
        <div class="ball2" ball></div>
    </div>
</body>
</html>
<script>
  // 获取盒子的距离 球 线
    let boxLeft=document.querySelector(".box").offsetLeft;
    let balls=document.querySelectorAll(".box>div[ball]");
    let slide=document.querySelector(".slide");

    //  声明一个函数  info
    function info(){
      // 获取两球之间的距离的绝对值 的width    abs 取绝对值
        let width=Math.abs(balls[0].offsetLeft-balls[1].offsetLeft);
        // 球的最小值 的 left
        let left=Math.min(...[...balls].map((e)=>e.offsetLeft))+10;
        // 赋值给线段
        slide.style.width=width+'px';
        slide.style.left=left+'px';
    }
    info()
    
    balls.forEach((item,index)=>{
        item.onmousedown=function(e){
            let x=e.offsetX;

            document.onmousemove=function(e){

                let tox=e.pageX-boxLeft-x;
                tox=tox>480?480:tox<0?0:tox;
                item.style.left=tox+'px'
                info()
            }

            document.onmouseup=function(){
                document.onmousemove=null;
            }

            return false
        }
    })
</script>

第二种

<!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>
  <style>
    body{
      margin: 0;
    }
    #slide{
    width: 1000px;
    height: 40px;
    position: relative;
    background-color: #ccc;
    }
    #slide input{
      width: 40px;
      height: 40px;
      position: absolute;
      top: 0;
      z-index: 1;
    }
    #slide .b{
      left: 40px;
    }
    #slide .c{
      background-color: pink;
      position: absolute;
      height: 40px;
    }
</style>
</head>
<body>
  <div id="slide">
    <input type="radio" class="a" checked>
    <input type="radio" class="b" checked>
    <div class="c"></div>
</div>
</body>
<script>
var s=document.querySelectorAll("input");
var c=document.querySelector(".c");

s.forEach((item,index)=>{
   item.onmousedown=function(e){
    document.onmousemove=(e)=>{
      if(e.pageX<0 || e.pageX>960) return false;
        this.style.left=e.pageX+'px';
        let a=s[0].offsetLeft;
        let b=s[1].offsetLeft;
        c.style.left=Math.min(a,b)+20+'px';
        c.style.width=Math.abs(a-b)+'px';
    }
  document.onmouseup=function(){
    document.onmousemove=null
     } 
  }
})
</script>
</html>

两种思路有些相同之处，，本人菜鸟一枚，，还望高手勿喷！！！！

原生JS 小球滑块 （Slider 滑块）

第二种

猜你喜欢

原生JS 小球滑块（Slider 滑块）