js放大鏡放大購物圖片效果

發(fā)布時(shí)間：2020-10-10 05:09:05 來源：腳本之家閱讀：115 作者：秋天1014童話欄目：web開發(fā)

圖片放大鏡效果，供大家參考，具體內(nèi)容如下

一難點(diǎn)：不讓黃盒子出界

二難點(diǎn)：讓大盒子相應(yīng)移動(dòng)（比例）

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>我的放大鏡</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  .box{
   margin: 100px;
   position: relative;
  }
  .small{
   width: 350px;
   height: 350px;
   border: 1px solid #999;
   position: relative;
  }
  .select{
   display: none;
   width: 100px;
   height: 100px;
   background: rgba(255,255,0,0.4);
   position: absolute;
   left: 0;
   top: 0;
   cursor: move;

  }
  .big{
   display: none;
   position: absolute;
   left: 360px;
   top: 0;
   width: 450px;
   height: 450px;
   border: 1px solid #ccc;
   overflow: hidden;
  }
  .big img{
   position: absolute;
   left: 0;
   top: 0;
  }
 </style> 
</head>
<body>
 <div class="box">
  <div class="small" id="smallbox">
   <img src="images/001.jpg" alt="">
   <div class="select" id="mask" ></div>
  </div>

  <div class="big" id="bigbox">
   <img src="images/0001.jpg" alt="">
  </div>
 </div>

 <script> 
  var smallbox = document.getElementById('smallbox');
  var bigbox = document.getElementById('bigbox');
  var mask = document.getElementById('mask');
  var bigImg = bigbox.children[0];
  smallbox.onmouseover = function(){
   mask.style.display = "block";
   bigbox.style.display = "block";
  }
  smallbox.onmouseout = function(){
   mask.style.display = "none";
   bigbox.style.display = "none";
  }

  smallbox.onmousemove = function(event){
   var event = event || window.event;

   var x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth/2;
   var y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight/2;
   //不讓黃盒子出界
   if(x < 0){
    x = 0;
   }else if(x > smallbox.offsetWidth - mask.offsetWidth){
    x = smallbox.offsetWidth - mask.offsetWidth;
   }

   if(y<0) {
    y = 0;
   }else if(y > smallbox.offsetHeight - mask.offsetHeight){
     y = smallbox.offsetHeight - mask.offsetHeight;
   }
   mask.style.left = x + "px";
   mask.style.top = y + "px";

   bigImg.style.left = -x/smallbox.offsetWidth * bigbox.offsetWidth + "px"; //注意是-x
   bigImg.style.top = -y/smallbox.offsetHeight * bigbox.offsetHeight + "px";
  }
 </script>
</body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

js放大鏡放大購物圖片效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽