JS实现拖动模糊框特效

本文实例为大家分享了JS实现拖动模糊框特效的具体代码，供大家参考，具体内容如下

需求：

在图片上拖动按钮，图片蒙层慢慢覆盖，当蒙层边缘碰到左右下角文字时，文字隐藏。

技术：

* ，鼠标坐标获取

效果图

源码分享：

HTML

<h1>Image Comparison Slider</h1>
<nav>
<!--底层图--> <img src="img/img-original.jpg" alt="">
<!--蒙版使用背景图--> <div id="img">
  <h3 id="leftBottom">Modified</h3>
<!--拖动按钮--> <button id="btn">
   <span class="iconfont icon-zuojiantou"></span>
   <span class="iconfont icon-youjiantou"></span>
  </button>
 </div>
 <h3 id="rightBottom">Original</h3>
</nav>

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>

来源：https://blog.csdn.net/hthththtt/article/details/108181361