网页常见特效2——仿京东放大镜

1效果图分析

1.鼠标移入，让遮罩层和装有大图片的div显示，鼠标离开，让遮罩层和装有大图片的div消失
2.鼠标进行移动，将鼠标在box的坐标位置给遮罩层，并且判断遮罩层的临界值
3.在移动鼠标同时，右侧大盒子中的图片也要跟着相反的方向进行移动

2.代码实现

	<div class="box">
        <img src="./upload/mobile.jpg" alt="">
        //遮罩层
        <div class="mask"></div>
        <div class="bigBox">
            <img src="./upload/big.jpg" alt="">
        </div>
    </div>

<style>
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            text-align: center;
            border: 1px solid #ccc;
        }

        .mask {
            position: absolute;
            left: 0;
            top: 0;

            width: 300px;
            height: 300px;
            background-color: yellow;
            opacity: .3;
            display: none;

        }

        .bigBox {
            position: absolute;
            left: 450px;
            top: 0;
            width: 500px;
            height: 500px;
            display: none;
            overflow: hidden;
        }

        .bigBox img {
            position: absolute;
            left: 0;
            top: 0;
            height: 800px;
        }
    </style>

 <script>
        var box = document.querySelector('.box')
        var mask = document.querySelector('.mask');
        var bigBox = document.querySelector('.bigBox');
        var bigImg = document.querySelector('.bigBox img');

        box.addEventListener('mousemove', function () {
            mask.style.display = 'block';
            bigBox.style.display = 'block'
        });
        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            bigBox.style.display = 'none'
        });
        box.addEventListener('mousemove', function (e) {
            //鼠标移动box，让mask的坐标作为鼠标在盒子中的坐标
            var x = e.pageX - box.offsetWidth / 2;
            var y = e.pageY - box.offsetHeight / 2;
            //获取mask在box中的最大移动距离
            var maskMoveX = box.offsetWidth - mask.offsetWidth;
            var maskMoveY = box.offsetWidth - mask.offsetWidth;
            //判断x,y的临界值
            if (x < 0) {
                x = 0
            } else if (x > maskMoveX) {
                x = maskMoveX;
            }
            if (y < 0) {
                y = 0
            } else if (y > maskMoveY) {
                y = maskMoveY;
            }
            mask.style.left = x + 'px';
            mask.style.top = y + 'px';
            //通过鼠标在box中移动，让大的图片进行等比例移动
            //获取大图片的最大移动距离
            var bigMoveMaxX = bigImg.offsetWidth - bigBox.offsetWidth;
            var bigMoveMaxY = bigImg.offsetWidth - bigBox.offsetWidth;
            // 大图片的移动距离 = 小图片的移动距离*大图片最大移动距离/小图片的最大移动距离
            bigImg.style.left = -x * bigMoveMaxX / maskMoveX + 'px';
            bigImg.style.top = -y * bigMoveMaxY / maskMoveY + 'px'

        })