JS實現(xiàn)拖動模糊框特效

更新時間：2020年08月25日 08:53:22 作者：hthththtt

這篇文章主要為大家詳細介紹了JS實現(xiàn)拖動模糊框特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)拖動模糊框特效的具體代碼，供大家參考，具體內(nèi)容如下

需求：

在圖片上拖動按鈕，圖片蒙層慢慢覆蓋，當蒙層邊緣碰到左右下角文字時，文字隱藏。

技術：

監(jiān)聽器，鼠標坐標獲取

效果圖

源碼分享：

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; /*初始狀態(tài)顯示一半蒙層*/
   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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: