js放大镜

解释都在代码里面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>放大镜</title>
</head>
<style>
    .Box {
        margin-top: 200px;
        margin-left: 200px;
        width: 250px;
        height: 350px;
        position: relative;
    }

    .smallBox {
        width: 350px;
        height: 350px;
        position: relative;
    }

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

    .smallBox #mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 175px;
        height: 175px;
        background: rgba(255, 255, 0, 0.4);
        cursor: move;
        display: none;
    }

    #big_box {
        width: 400px;
        height: 400px;
        overflow: hidden;
        position: absolute;
        top: 0px;
        left: 360px;
        display: none;
    }

    #big_box>img {
        position: absolute;
    }

    img {
        display: block;
    }
</style>

<body>
    <!-- 这个需要两张图片，按一定的比例的图片，由于找不到两张一样的图片，所以就用了同一张图片 -->
    <div class="Box" id="box">
        <div class="smallBox" id="small_box">
            <img src="https://img.alicdn.com/imgextra/i3/272205633/TB1KzRenwZC2uNjSZFnXXaxZpXa_!!0-item_pic.jpg_430x430q90.jpg" />
            <div id="mask"></div>
        </div>
        <div class="bigBox" id="big_box">
            <img src="https://img.alicdn.com/imgextra/i3/272205633/TB1KzRenwZC2uNjSZFnXXaxZpXa_!!0-item_pic.jpg_430x430q90.jpg" id="bigImg"
            />
        </div>
    </div>
    </div>
    <script>
        function getDomId(id) {
            return document.getElementById(id);
        }
        function Glass() {
            this.box = getDomId("box");
            this.bigBox = getDomId("big_box");
            this.smallBox = getDomId("small_box");
            this.mask = getDomId("mask");
            this.bigImg = getDomId("bigImg");
        }
        Glass.prototype.init = function () {
            let that = this;
            that.box.onmousemove = function (event) {
                let events = event || window.event;
                //求鼠标当前位置距离盒子左边的距离=鼠标当前位置-盒子距离左边的位置
                let maskX = events.pageX - that.box.offsetLeft;
                console.log(maskX + '     ' + 'X')
                //求鼠标当前位置距离盒子上边的距离=鼠标当前位置-盒子距离上边边的位置
                let maskY = events.pageY - that.box.offsetTop;
                console.log(maskY + '     ' + 'Y');
                // 让鼠标处于阴影盒子的中间位置
                let maskXs = maskX - that.mask.offsetWidth / 2;
                console.log(maskXs + '    ' + 'Xs')
                let maskYs = maskY - that.mask.offsetHeight / 2;
                console.log(maskYs + '    ' + 'Ys');
                //判断上下左右的临界点
                if (maskXs < 0) {
                    maskXs = 0;
                }
                if (maskYs < 0) {
                    maskYs = 0;
                }
                //判断 遮罩层 左右 能移动的最大距离 如果超出就等于它可移动的最大距离  最大可移动距离=小图片宽度-遮罩层的宽度
                if (maskXs > (that.smallBox.offsetWidth - that.mask.offsetWidth)) {
                    maskXs = that.smallBox.offsetWidth - that.mask.offsetWidth
                }
                if (maskYs > (that.smallBox.offsetHeight - that.mask.offsetHeight)) {
                    maskYs = that.smallBox.offsetHeight - that.mask.offsetHeight;
                }
                //控制鼠标移动的位置
                that.mask.style.left = maskXs + 'px';
                that.mask.style.top = maskYs + 'px';

                //根据比例调整大图的位置
                that.bigImg.style.left = -that.bigImg.offsetWidth / that.smallBox.offsetWidth * maskXs + "px";
                that.bigImg.style.top = -that.bigImg.offsetHeight / that.smallBox.offsetHeight * maskYs + "px";
            }
            that.box.onmouseover = function () {
                that.bigBox.style.display = 'block';
                that.mask.style.display = 'block';
            }
            that.box.onmouseout = function () {
                that.bigBox.style.display = 'none';
                that.mask.style.display = 'none';
            }
        }

        var gl = new Glass();
        gl.init();
    </script>
</body>

</html>
猜你喜欢
