欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js放大镜放大购物图片效果

程序员文章站 2023-11-16 08:28:22
图片放大镜效果,供大家参考,具体内容如下 一难点:不让黄盒子出界 二难点:让大盒子相应移动(比例) ...

图片放大镜效果,供大家参考,具体内容如下

一难点:不让黄盒子出界

二难点:让大盒子相应移动(比例)

<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" style="display:none;"></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>

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