滑动解锁de制作

最新推荐文章于 2024-02-25 00:16:59 发布

下雪不过冬天

最新推荐文章于 2024-02-25 00:16:59 发布

阅读量85

点赞数 1

本文链接：https://blog.csdn.net/m0_56232007/article/details/117303125

版权

<!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>
    #box{
      width: 600px;height: 50px;
      border: 1px solid #ccc;
      background-color: #e5e5e5;
      margin: 0 auto;
      margin-top: 200px;
    }
    #lock{
      width: 50px;
      height: 50px;
      background-color: #1abc9c;
    }
    #btn{
      width: 50px;
      height: 50px;
      background-color: #fff;
      box-sizing: border-box;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
      float: right;
    }
  </style>
</head>
<body>
  <!-- 容器。 -->
  <div id="box">
    <!-- 滑动成功的部分 -->
    <div id="lock">
      <!-- 滑动的按钮 -->
      <div id="btn"></div>
    </div>
  </div>
  <!-- 
    实现步骤：
      1.获取元素节点
      2.给btn添加鼠标按下事件
      3.计算lock的值。 lock的宽应该随着鼠标的移动而变化。
      4.鼠标抬起，解绑移动事件  加给document文档。 为了避免鼠标移出btn时，再抬起，解绑失败。
      5.判定lock宽度的范围，最小不能小于btn的宽。最大不能超过box的宽。
      6.如果lock 的宽和box的宽相等，说明解锁成功，弹出一个提示框。
      7.解锁成功把鼠标按下和移动事件都解绑。
      8.解锁不成功时，按钮应该自动回到初始位置。
      9.鼠标抬起时，如果lock的宽与box的宽不相等，说明解锁失败，把lock的宽设置为初始值，也就是btn的宽。
      10.解决lock瞬间回到初始值，给lock添加一个过渡属性。
      11.鼠标按下时，记得把过渡属性设置为none。


   -->
  <script>
    // 1.获取元素节点
    var box = document.getElementById("box")
    var lock = document.getElementById("lock")
    var btn = document.getElementById("btn")
    // 2.给btn添加鼠标按下事件
    btn.onmousedown = function(ev){
      box.onmousemove = function(event){
        lock.style.transition = "none"
        // 3.计算lock的宽  最后需要加上btn的宽。
        var w = event.pageX - box.offsetLeft - ev.offsetX + btn.offsetWidth;
        // 5.判定范围  最小值不能小于btn的宽，最大值不能大于box的宽
        if (w<=btn.offsetWidth) {
          w = btn.offsetWidth;
        }else if(w>=box.offsetWidth){
          w = box.offsetWidth;
          setTimeout(function(){
            alert("解锁成功！")
          },20)
          
          // 解锁成功后，将事件解绑。
          box.onmousemove = null;
          btn.onmousedown = null;
        }
        lock.style.width = w + "px";
      }
    }
    // 4.鼠标抬起时，解绑移动事件 【最好是加给document文档，为了避免鼠标离开按钮后再抬起出现解绑失败的问题。】
    document.onmouseup = function(){
      if (box.offsetWidth != lock.offsetWidth) {
        lock.style.width = btn.offsetWidth + "px";
        lock.style.transition = "all 0.5s"
      }
      box.onmousemove = null;
    }

  </script>
</body>
</html>

在这里插入图片描述