JavaScript-221：仿京东放大镜效果

效果图

结构

    <div class="fangda">
       <div class="test">
           <img src="https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a559d2ee1bd5a04779569" alt="">

           <div class="mask"></div>
           <div class="big">
               <img src="https://www.dataojocloud.com/dataeye/v1/data/image/get?imageid=617a559d2ee1bd5a04779569"
                   alt="" class="bigImg">
           </div>
       </div>
   </div>

CSS

        * {
    
    
            margin: 0;
            padding: 0;
        }

        .test {
    
    
            width: 450px;
            height: 450px;
            position: relative;
        }

        .test img {
    
    
            width: 100%;
            height: 100%;
        }

        .mask {
    
    
            display: none;
            width: 100px;
            height: 100px;
            background: #fede4f;
            position: absolute;
            left: 0;
            top: 0;
            opacity: .5;
            border: 1px solid #ccc;
            cursor: move;
        }

        .big {
    
    
            display: none;
            width: 500px;
            height: 500px;
            position: absolute;
            left: 610px;
            top: 0;
            background-color: pink;
            border: 1px solid #ccc;
            overflow: hidden;
        }

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

            width: 800px;
            height: 800px;
        }

js

        window.addEventListener('load', function ()
        {
    
    
            var test = document.querySelector('.test');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            //当我们鼠标经过就显示和隐藏遮挡层
            test.addEventListener('mouseover', function ()
            {
    
    
                mask.style.display = 'block';
                big.style.display = 'block';
            })
            test.addEventListener('mouseout', function ()
            {
    
    
                mask.style.display = 'none';
                big.style.display = 'none';
            })
            test.addEventListener('mousemove', function (e)
            {
    
    
                //先计算盒子里的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                //限制边界
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
                //判断
                var maskMax = test.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';
                //大图片移动距离
                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';
            })
        })