用javascript实现放大镜效果

.preview_wrap {
      width: 400px;
      height: 590px;
            }
 
.preview_img {
      position: relative;
      height: 398px;
      border: 1px solid #CCCCCC;
      background-color: pink;text-align: center;
                
            }
 
.preview_img .smallImg {
      margin-top: 25%;
      width: 200px;
            }
 
.mask {
        display: none;
        position: absolute;
        top: left: 0;
        width: 300px;
        height: 300px;
        background-color: yellow;
       opacity: .5;
       border: 1px solid #CCCCCC;
        cursor: move;
 }
 
.big {
       display: none;
       position: absolute;
       left: 410px;
       top: 0;
       width: 500px;
       height: 500px;
       z-index: 999;
       border: 1px solid #ccc;
       overflow: hidden;
}

.big img {
       position: absolute;
       top: 0;
       left: 0;
}

// 整个案例可以分为三个功能模块
// 鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
// 黄色的遮挡层跟随鼠标功能。
// 移动黄色遮挡层，大图片跟随移动功能。
 
// 1.鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能
// 就是显示与隐藏
 
// 当页面全部加载执行完毕后再执行js代码
window.addEventListener('load', function() {
            var preview_img = document.querySelector('.preview_img');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
 
            //2.当我们鼠标经过 preview_img 就显示和隐藏mask遮挡层和 big 大盒子
            preview_img.addEventListener('mouseover', function() {
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            preview_img.addEventListener('mouseout', function() {
                mask.style.display = 'none';
                big.style.display = 'none';
            })
 
            // 黄色的遮挡层跟随鼠标功能。
            // 把鼠标坐标给遮挡层不合适。因为遮当层坐标以父盒子为准。
            // 首先是获得鼠标在盒子的坐标
            // 之后把数值给遮挡层做为left和top值。
            // 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
 
            // 2.鼠标移动的时候,让黄色的盒子跟着鼠标来走
            preview_img.addEventListener('mousemove', function(e) {
                //(1).先计算出鼠标在盒子里的坐标
                // 先算出鼠标在页面中的坐标,减去盒子距离左侧的距离,就是鼠标在盒子里的坐标
                // 但是这里要注意:
                // 要看他有没有父元素,并且父元素有没有定位
 
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // console.log(x,y)
                //(2)盒子高度 300的一半 150
                // (3)mask移动的距离
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
 
                // (4)遮挡层不能超出小图片盒子范围
                // 如果小于0,就把坐标设置为0
 
                //遮挡层的最大一定距离,因为都是正方形,所以高也适用
                var maskMax = preview_img.offsetWidth - mask.offsetWidth;
                if (maskX <= 0) {
                    maskX = 0
                    //如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
                    //遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
                } else if (maskX >= maskMax) {
                    maskX = maskMax;
                }
                if (maskY <= 0) {
                    maskY = 0;
                    //如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
                    //遮挡层的最大移动距离:小图片盒子宽度减去遮挡层盒子宽度
                } else if (maskY >= maskMax) {
                    maskY = maskMax;
                }
 
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
 
 
                // 移动黄色遮挡层, 大图片跟随移动功能
                // 求大图片的移动距离公式:
                //     遮挡层移动距离 / 遮挡层最大移动距离 = 大图片移动距离 / 大图片最大移动距离
                // 3.大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
                var bigImg = document.querySelector('.bigImg'); //大图
                //大图片最大移动距离
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                //大图片最大移动距离
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            })
 
 })