图片实现放大镜效果

来源：互联网发布：浙江大学王灿数据挖掘编辑：程序博客网时间：2024/05/17 06:46

<!DOCTYPE html>      <html>      <head>          <title>放大镜效果</title>          <meta charset="utf-8">          <style type="text/css">          body{position: relative;}          *{margin: 0;padding:0;}          #Box{              height:300px;               width:300px;              position: relative;              border:1px solid gray;          }  /*外层显示图片的盒子*/       #Box img{              height:300px;               width:300px;              }  /*盒子里面的图片大小*/           #lay{              background:#fff;              border:1px solid gray;              position: absolute;              top:0;              left: 0;              opacity:0.5;              /*display:none;*/              filter:alpha(opacity=50);          } /*放大的那个网*/        #bigBox{              height:300px;               width:300px;              position: absolute;              top:0;              left:310px;              overflow: hidden;              /*display:none;*/              border: 1px solid gray;          }  /*放大镜*/                         </style>          <script type="text/javascript">              window.onload = function(){                  var Box = document.getElementById("Box");  /*获取原图盒子*/                var bigBox = document.getElementById("bigBox");  /*放大图片的盒子*/                var bigbox = bigBox.children[0];                  var lay = document.getElementById("lay");  /*放大镜*/                //鼠标移入时，将放大镜和bigBox显示出来  //              Box.onmouseover = function(){  /*鼠标放上放大镜和放大图的均显示出来*///                  lay.style.display = "block";  //                  bigBox.style.display = "block";  //              }  //              //鼠标移出时，将放大镜和bigBox隐藏起来  //              Box.onmouseout = function(){  /*鼠标放上放大镜和放大图的均隐藏*///                  lay.style.display = "none";  //                  bigBox.style.display = "none";  //              }                  Box.onmousemove = function(e){                      e = e || event;//事件源的兼容问题                      var scale = 4;//图片的放缩比例                      //将鼠标放到放大镜的中间                      var x = e.clientX - lay.offsetWidth/2;                      var y = e.clientY - lay.offsetHeight/2;                      //将放大镜的宽高与盒子的宽高结合起来按比例放缩                      lay.style.width = parseInt(Box.offsetWidth / scale )+ "px";                      lay.style.height = parseInt(Box.offsetHeight / scale)+ "px";                      //设置大盒子的宽高                      bigbox.style.width = Box.offsetWidth * scale + "px";                      bigbox.style.height = Box.offsetHeight * scale + "px";                      if(x < 0){                          x = 0;//左边界的判断，当超出时将x置为0;                      }                      //右边界的判断，当超出时将x置为Box的宽度减去放大镜的宽度;                      if( x >= Box.offsetWidth - lay.offsetWidth){                          x = Box.offsetWidth - lay.offsetWidth;                      }                      //下边界的判断，当超出时将y置为Box的高度减去放大镜的高度;                      if( y >= Box.offsetHeight - lay.offsetHeight){                          y = Box.offsetHeight - lay.offsetHeight;                      }                      if(y < 0){                          y = 0;//上边界的判断，当超出时将y置为0;                      }                      lay.style.left = x + "px";                      lay.style.top = y + "px";                      //同比例放缩，大的盒子图片的放缩比例，当小盒子向右移动的时候，大盒子向左移动同等的比例的宽高，方向是相反的                       var left = lay.offsetLeft * scale;                       var top  = lay.offsetTop * scale ;                      bigbox.style.marginLeft =(left * (-1)) + "px";                      bigbox.style.marginTop =(top * (-1))+ "px";                  }              }                        </script>                </head>      <body>          <div id="Box">              <img  src="img/shuijiao.jpg"/>              <span id="lay"></span>          </div>  <!--显示的原图-->        <div id="bigBox">              <img  src="img/shuijiao.jpg" />          </div>  <!--放大的图片-->    </body>      </html>

我的理解是一个显示原图，再设置一个相对定位和隐藏起来，鼠标经过原图的时改显示出来，给原图放大倍数，

再计算margin，然后负方向移动，把指向的图片放进相对定位的盒子即可

阅读全文

0 0