javascript實現電商放大鏡效果

更新時間：2020年11月23日 09:54:37 作者：sevorm

這篇文章主要為大家詳細介紹了javascript實現電商放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現電商放大鏡效果的具體代碼，供大家參考，具體內容如下

學習內容：

1、event.pageX 屬性返回鼠標指針的位置，相對于文檔的左邊緣。
2、clientX 事件屬性返回當事件被觸發(fā)時鼠標指針相對于瀏覽器頁面（或客戶區(qū)）的水平坐標。
3、onmouseenter鼠標移入
4、onmouseleave鼠標移出

案例完整代碼。html+css3+javascript

案例需求:鼠標點擊左邊圖片時（鼠標呈十字架），遮罩層顯示，右邊盒子顯示。且鼠標移動中心在遮罩層中心，右邊大盒子顯示鼠標點到的地方，以800：350比例顯示。遮罩層只能規(guī)定左邊盒子范圍內移動而且不給超出。

步驟：

1. 查找元素

1.1 查找 main 總分區(qū)
1.2 查找 small 盒子
1.3 查找 small 盒子內的 img 小圖片
1.4 查找 mask 遮罩層
1.5 查找 big 盒子
1.6 查找 big 盒子內的 img 大圖片

2. 鼠標移入 main 的時候

2.1 顯示遮罩盒子
2.2 顯示大圖分區(qū)

3. 鼠標移出 main 的時候

3.1 隱藏遮罩盒子
3.2 隱藏大圖分區(qū)

4. 鼠標在 main 移動的時候 !!!

4.1 遮罩盒子跟隨鼠標移動
4.2 遮罩盒子在鼠標中心處理
4.3 遮罩盒子在分區(qū)邊界內移動處理
4.4 大圖片 <反向> <按比例> 跟隨鼠標移動

注意. 獲取元素偏移值和寬高

1. 獲取分區(qū) 的水平，垂直偏移值
2. 獲取分區(qū) 的寬度，高度
3. 獲取遮罩盒子的寬度，高度 (隱藏的盒子無法獲取寬高)
4. 獲取大圖片的寬度，高度 (隱藏的盒子無法獲取寬高)

html代碼:

<body>
 <!-- 整個大盒子 -->
 <div class="main" id="main">
  <div class="small">
   <!--小圖-->
   <img alt="" class="smallImg" src="../img/iphoneX.jpg" width="350" />
   <!-- 遮擋層,黃色的小方塊 -->
   <div class="mask"></div>
  </div>
  <!--大層-->
  <div class="big">
   <!--大圖-->
   <img alt="" class="bigImg" src="../img/iphoneX.jpg" width="800" />
  </div>
 </div>
</body>

css代碼:

 <style>
  * {
   margin: 0;
   padding: 0;
  }
 
  .main {
   width: 350px;
   height: 350px;
   margin: 100px;
   border: 1px solid #ccc;
   position: relative;
  }
 
  .big {
   width: 400px;
   height: 400px;
   position: absolute;
   top: 0;
   left: 360px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }
 
  .mask {
   width: 175px;
   height: 175px;
   background: rgba(255, 255, 0, 0.4);
   position: absolute;
   top: 0px;
   left: 0px;
   /* 把鼠標指針換成移動圖標 */
   cursor: move;
   display: none;
  }
 
  .small {
   position: relative;
   height: 350px;
   width: 350px;
  }
 
  .active .mask,
  .active .big {
   display: block;
  }
 
  .big img {
   /* 相對定位：相對自己原本的位置定位，原來的位置保留的 */
   position: absolute;
  }
</style>

javascript代碼:

<script>
 //查找元素
 var main = document.querySelector(".main");
 var small = document.querySelector(".small"); //左邊小盒子
 var smallImg = document.querySelector(".smallImg");
 var mask = document.querySelector(".mask"); //黃色遮罩層
 var big = document.querySelector(".big");//右邊小盒子
 var bigImg = document.querySelector(".big .bigImg");
 
 //2. 鼠標移入 main 的時候
 //2.1 顯示 遮罩盒子
 // 2.2 顯示 大圖分區(qū)
 main.onmouseenter=function () {
  mask.style.display="block";
  big.style.display="block";
 };
 main.onmouseleave=function () {
  mask.style.display="none";
  big.style.display="none";
 };
 // 4. 鼠標在 main 移動的時候 !!!
 //  4.1 遮罩盒子 跟隨 鼠標移動
 // 4.2 遮罩盒子 在 鼠標中心 處理
 // 4.3 遮罩盒子 在 分區(qū)邊界 內移動處理
 // 4.4 大圖片 <反向> <按比例> 跟隨 鼠標移動
 small.onmousemove=function (e) {
  var x=e.pageX-100-(175/2);  //盒子的寬高為300px，因為鼠標默認在左上角。因為需要向左移動自身一半
  var y=e.pageY-100-(175/2);  盒子的寬高為300px，因為鼠標默認在左上角。因為需要向下移動自身一半
  if(x<0) x=0;      //規(guī)定遮罩層移動范圍。如果遮罩層超出了小盒子邊框，x就重置為0.
  if(y<0) y=0;      // //規(guī)定遮罩層移動范圍。如果遮罩層超出了小盒子邊框，y就重置為0.
  if(x>175) x=175;     //遮罩層本身的寬高為175
  if(y>175) y=175;     
  mask.style.top=(y)+"px";
  mask.style.left=(x)+"px";
  bigImg.style.top=(-y*(800/350))+"px";  //右邊放大效果，以800：350顯示
  bigImg.style.left=(-x*(800/350))+"px";  //在xy前面加-號是因為需要反向顯示
 }
</script>

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

您可能感興趣的文章: