JS拖动模糊框 JS实现拖动模糊框特效

时间:2021-03-16 hthththtt 人气:0

想了解JS实现拖动模糊框特效的相关内容吗，hthththtt在本文为您仔细讲解JS拖动模糊框的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：js拖动模糊框,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>

加载全部内容