放大镜效果

最新推荐文章于 2020-09-13 15:20:27 发布

IT废大叔

最新推荐文章于 2020-09-13 15:20:27 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/qq_43000233/article/details/88539782

版权

var box = $('nav_box1');
var smallBox = box.children[0];
var mask = $('mask');
var bigBox = $('big_box');
var bigImg = bigBox.children[0];
smallBox.onmouseover=function () {
  mask.style.display='block';
  bigBox.style.display='block';
  smallBox.onmousemove=function (event) {
      var event = event || window.event;
      //求鼠标的坐标
      var pointX =event.clientX -smallBox.offsetParent.offsetLeft-mask.offsetWidth*0.5;
      var pointY =event.clientY -smallBox.offsetParent.offsetTop-mask.offsetHeight*0.5;
      //边界检测
      if(pointX<0){
          pointX=0
      }else if (pointX>=smallBox.offsetParent.offsetWidth-mask.offsetWidth){
          pointX=smallBox.offsetParent.offsetWidth-mask.offsetWidth;
      }
      if(pointY<0){
          pointY=0
      }else if (pointY>=smallBox.offsetParent.offsetHeight-mask.offsetHeight){
          pointY=smallBox.offsetParent.offsetHeight-mask.offsetHeight;
      }
      //移动
      mask.style.left = pointX + 'px';
      mask.style.top = pointY + 'px';
      bigImg.style.left = -pointX/(smallBox.offsetParent.offsetWidth/bigBox.offsetParent.offsetWidth);
      bigImg.style.top = -pointY/(smallBox.offsetParent.offsetHeight/bigBox.offsetParent.offsetHeight) ;
  }
};

bigImg.style.left = -pointX/(smallBox.offsetParent.offsetWidth/bigBox.offsetParent.offsetWidth);
bigImg.style.top = -pointY/(smallBox.offsetParent.offsetHeight/bigBox.offsetParent.offsetHeight) ;这两句要加+‘px’
还要加上这个定位，图片才能移动
#big_box img{
position: absolute;
top: 0;
left: 0;
}