【放大镜效果】利用mouseover,mouseout,mousemove+offset属性

css样式，记住offset属性，获得带有定位父元素的属性，父元素没有定位就以body为主。

• {
  margin: 0;
  padding: 0;
  }
  body {
  box-sizing: border-box;
  }
  .w {
  width: 1200px;
  margin: 0 auto;
  }
  a {
  text-decoration: none;
  }
  li {
  list-style: none;
  }
  .shortcut {
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #999;
  background-color: #f5f5f5;
  }
  .left_text {
  float: left;
  }
  .right_text {
  float: right;
  }
  .right_text ul {
  display: inline-block;

}
.right_text ul li {
display: inline-block;
margin: 0 5px;
}

.right_text ul span {
font-size: 3px;
}

/* nav start */
.nav {
position: relative;
margin-top: 20px;
height: 63px;
}
.logo {
position: absolute;
width: 171px;
height: 63px;
}
.logo a {
font-size: 0;
}
.search {
position: absolute;
top: 9px;
left: 440px;
width: 325px;
height: 26px;
border: 2px solid #c50000;
}
.input {
height: 24px;
width: 273px;
border: 0;
outline: none;
padding-left: 10px;
}
.btn_search {
height: 26px;
width: 37px;
border: 0;
color: #ffffff;
background-color: #c50000;
}
.shopcar {
position: absolute;
top: 9px;
right: 51px;
background-color: #f5f5f5;
width: 110px;
color: #999;
font-size: 14px;
text-align: center;
line-height: 26px;
height: 26px;
border: 1px solid #ccc;
}
.shopcar span {
position: absolute;
top: 0px;
left: 2px;
font-size: 10px;
color: #c50000;
}
.shopcar p::after{
content: ‘’;
position: absolute;
top: 7px;
right: 7px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
width: 6px;
height: 6px;
transform: rotate(45deg);
}
.shopcar i {
font-style: normal;
position: absolute;
top: -11px;
left: 80px;
font-size: 10px;
color: #ffffff;
background-color: #c50000;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
border: 1px solid #c50000;
border-radius: 50%;
}
.nav_items {
width: 381px;
position: absolute;
top: 41px;
left: 439px;
}
.nav_items ul li {
display: inline-block;
}
.nav_items ul li a {
font-size: 10px;
margin-right: 5px;
color: #999;
}

/* nav end */

.classify {
margin-top: 10px;
height: 40px;
border-bottom: 2px solid #c50000;
line-height: 40px;
font-size: 16px;
}
.classify_all {
float: left;
width: 180px;
text-align: center;
background-color: #c50000;
color: #ffffff;
}
.classify_items {
width: 700px;
margin-left: 30px;
float: left;
}
.classify_items ul li {
display: inline-block;
margin-left: 20px;
}
.classify_items ul li a {
color: #333;
}
.goods {
margin-top: 15px;
}
.goods_title {
font-size: 14px;
color: #999;

}
.pic {
position: relative;
margin-top: 10px;
width: 390px;
height: 390px;
border: 1px solid #ccc;
}
.img {
width: 100%;

}
.big {
position: absolute;
display: none;
top: 15px;
left: 410px;
width: 500px;
height: 500px;
border: 1px solid #ccc;
overflow: hidden;
}
.big_img {
position: absolute;
top: 0;
left: 0;
}
.mask {
display: none;
position: absolute;
top: 0;
left: 0;
cursor: move;
width: 300px;
height: 300px;
background-color: #FEDE4F;
opacity: .5;
}

js：
window.addEventListener(‘load’,function() {
var mask = document.querySelector(‘.mask’);
var pic = document.querySelector(‘.pic’);
var big_pic = document.querySelector(‘.big’);
pic.addEventListener(‘mouseover’, function(){
mask.style.display = ‘block’;
big_pic.style.display = ‘block’;
});
pic.addEventListener(‘mouseout’, function () {
mask.style.display = ‘none’;
big_pic.style.display = ‘none’
});

pic.addEventListener('mousemove', function(e){
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    console.log(x);
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    
    var maskMaxX = pic.offsetWidth - mask.offsetWidth;
    var maskMaxY = pic.offsetHeight - mask.offsetHeight;
   
    if (maskX <= 0) {
        maskX = 0;
    } else if (maskX >= maskMaxX) {
        maskX = maskMaxX;
    }
    if (maskY <= 0) {
        maskY = 0;
    } else if (maskY >= maskMaxY) {
        maskY = maskMaxY;
    }
    
    mask.style.left = maskX + 'px';
    mask.style.top = maskY + 'px';
    大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
    var bigIMg = document.querySelector('.big_img');
    // 大图片最大移动距离
    var bigMax = bigIMg.offsetWidth - big_pic.offsetWidth;
    // 大图片的移动距离 X Y
    var bigX = maskX * bigMax / maskMaxX;
    var bigY = maskY * bigMax / maskMaxY;
    bigIMg.style.left = -bigX + 'px';
    bigIMg.style.top = -bigY + 'px';
});

});