JS实现拖动模糊框特效

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

需求：

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

技术：

监听器，鼠标坐标获取

效果图

源码分享：

HTML

Image Comparison Slider
 

CSS样式

  * {
   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"); 
   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;
  }

JS部分

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