JavaScript仿京東放大鏡特效

本文例項為大家分享了仿京東放大鏡的具體程式碼，供大家參考，具體內容如下

功能需求：

1、分為三個模組
2、滑鼠經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏兩個盒子功能
3、黃色的遮擋層跟隨著滑鼠移動
4、移動黃色遮擋層，大圖片跟隨著移動

大圖片移動距離=（遮擋層移動距離*大圖片最大移動距離）/ 遮擋層最大移動距離

<style>
      body,div {
        margin: 0;
        padding: 0;
      }
      .prowww.cppcns.comduct {
        position: relative;
        width: 400px;
        height: 400px;
        margin: 50px 0 0 20px;
        border: 1px solid #000;
      }
      .preview_img img {
        width: 300px;
        height: 300px;
        margin: 50px 50px;
      }
      .mask {
        position: absolute;
        display: none;
    www.cppcns.com 
    top: 20px;
        left: 30px;
        width: 80px;
        height: 80px;
        background-color: yellow;
        opacity: 0.5;
        cursor: move;
      }
      .big {
        position: absolute;
        display: none;
        left: 410px;
        top: 0;
        width: 500px;
        height: 500px;
        z-index: 999;
        overflow: hidden;
      }
      .big img {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        height: 400px;
      }
    </style>
    <!-- 引入檔案 -->
    <script src="detail.js"></script>
  </head>
  <body>
    <div class="product">
      <div class="preview_img">
        <img src="images/xs.jpg" alt="Script仿京東放大鏡特效" />
        <div class="mask"></div>
        <div class="big">
          <img src="images/xs.jpg" alt="JavaScript仿京東放大鏡特效" class="bigImg" />
        </div>
      </div>
    </div>
</body>

JS頁面

//頁面預載入
window.addEventListener("load",function () {
  var preview_img = document.querySelector(".preview_img");
  var mask = document.querySelector(".mask");
  var barzgbig = document.querySelector(".big");

  //1.滑鼠經過 preview_img 就顯示和隱藏 mask 遮擋層 和 big 大盒子
  preview_img.addEventListener("mouseover",function () {
    mask.style.display = "blo 
ck";
    big.style.display = "block";
  });
  preview_img.addEventListener("mouseout",function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  //把滑鼠座標給遮擋層是不合適的，因為遮擋層座標以父盒子為準
  preview_img.addEventListener("mousemove",function (e) {
    //（1）先計算出滑鼠在盒子內的座標
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    //（2）減去盒子高度寬度的一半
    //（3）mask 移動的距離
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    //(4)如果座標小於0 就讓他停在 0 的位置(即超出盒子範圍就停止)
    var egdeX = preview_img.offsetWidth - mask.offsetWidth;
    var egdeY = preview_img.offsetHeight - mask.offsetHeight;
    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= egdeX) {
      maskX = egdeX;
    }
    if (maskY <= 0) {
      maskY = 0;
    } else if (maskY >= egdeY) {
      maskY = egdeY;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";
    //大圖片的移動距離 = 遮擋層移動距離*大圖片最大移動距離 / 遮擋層的最大移動距離
    var bigImg = document.querySelector(".bigImg");
    //大圖片最大移動距離
    var bigMax = bigImg.offsetWidth - big.offsetWidth;
   客棧 //大圖片的移動距離 x y
    var bigX = (maskX * bigMax) / egdeX;
    var bigY = (maskY * bigMax) / egdeY;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";
  });
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript仿京東放大鏡特效

JavaScript仿京東放大鏡特效

JavaScript仿京東放大鏡效果

JavaScript仿京東秒殺倒計時

js仿京東放大鏡效果

Javascript例項專案放大鏡特效的實現流程

基於javascript實現放大鏡特效

JavaScript仿淘寶放大鏡效果

javaScript實現放大鏡特效

JS實現電商商品展示放大鏡特效

JavaScript實現聯動選單特效

基於vue3.0.1beta搭建仿京東的電商H5專案

vue基於better-scroll仿京東分類列表

javascript實現京東登入顯示隱藏密碼

ElasticSearch_仿京東搜尋

JavaScript實現京東快遞單號查詢

javascript實現京東快遞單號的查詢效果

利用JavaScript模擬京東按鍵輸入功能

ElasticSearch仿京東搜尋實戰

jq 實現京東放大鏡效果，和切換圖片功能

JavaScript canvas實現雨滴特效

JavaScript仿京東放大鏡特效

相關推薦