JS实现拖动模糊框特效

<h1>Image Comparison Slider</h1>
 <nav>
<!--底层图--> <img src="/UploadFiles/2021-04-02/img-original.jpg">

CSS样式


<style>
  * {
   margin: 0;
   padding: 0;
   color: #E8F6F5;
  }
  body {
   background-color: #566B89;
   padding-top: 1px;
  }
  nav {
   width: 1200px;
   height: 675px;
   overflow-x: hidden;
   position: relative;
   margin: 100px auto 0;
  }
  h1 {
   text-align: center;
   margin-top: 100px;
   font-weight: 400;
  }
  nav>img {
   position: absolute;
  }
  #img {
   width: 600px; /*初始状态显示一半蒙层*/
   height: 675px;
   background: url("img/img-modified.jpg"); /*这里容器大小与图片一致，若想改变大小，设置背景大小属性 background-size: 图片宽 图片高;*/
   position: relative;
   animation: start 1s ease-in-out;
  }
  #img img {
   width: 100%;
   height: 100%;
  }
  @keyframes start {
   0% {
    width: 0;
   }
   50% {
    width: 650px;
   }
   100% {
    width: 600px;
   }
  }
  #btn {
   position: absolute;
   right: -25px;
   top: calc(50% - 25px);
   width: 56px;
   height: 56px;
   line-height: 56px;
   border: none;
   outline: none;
   border-radius: 50%;
   background-color: pink;
   font-size: 0;
   text-align: center;
   color: white;
   cursor: pointer;
  }
  .iconfont {
   font-size: 20px;
  }

  h3 {
   font-weight: 400;
   color: white;
  }
  #leftBottom,#rightBottom {
   position: absolute;
   width: 100px;
   bottom: 50px;
  }
  #leftBottom {
   left: 50px;
  }
  #rightBottom {
   right: 50px;
  }
</style>


JS部分


<script>
  let img = document.querySelector("#img");
  let btn = document.querySelector("#btn");
  let nav = document.querySelector("nav");
  let leftBottom = document.querySelector("#leftBottom");
  let rightBottom = document.querySelector("#rightBottom");
  btn.onmousedown = function (e) {
   let clientx = e.clientX; // 点击获取鼠标初始X坐标
   nav.onmousemove = function () {
    let e = arguments[0] || window.event;
    let X = e.clientX; // 移动时获取鼠标移动时的X坐标
    let imgW = parseInt(getComputedStyle(img,null).width);
    img.style.width = `${ imgW + X - clientx}px`; // 图片宽度 = 移动时的X坐标 - 点击时的初始坐标 也就是 图片宽度 + 鼠标X坐标的偏移量
    clientx = X ; // 将最新的位置的X坐标 赋值给 点击初始坐标 也就是 更新 X坐标初始值
    if (imgW < 150){
     leftBottom.style.display = "none";
    }else {
     leftBottom.style.display = "block";
    }
    if (imgW > 1050){
     rightBottom.style.display = "none";
    }else {
     rightBottom.style.display = "block";
    }
   }
  };
  document.onmouseup = function () {
   nav.onmousemove = null;
  }
</script>


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