js面向对象实现放大镜

Posted 被窝暖暖嘻嘻嘻

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js面向对象实现放大镜相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .small-box {
            width: 200px;
            height: 200px;
            background-image: url(./img/10.jpg);
            background-size: 200px 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        .mask {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            opacity: 0.4;
            display: none;
        }

        .big-box {
            width: 400px;
            height: 400px;
            background-image: url(./img/10.jpg);
            background-size: 800px 800px;
            position: absolute;
            top: 120px;
            left: 350px;
            display: none;
        }
    </style>
</head>

<body>
    <div class="small-box">
        <div class="mask"></div>
    </div>
    <div class="big-box"></div>
</body>

</html>
<script>
    class magnifier {
        constructor(newsmallbox, newmask, newbigbox) {
            this.smallbox = newsmallbox;
            this.mask = newmask;
            this.bigbox = newbigbox;
        }
        //鼠标移入事件
        onmouseover() {
            let that = this;
            this.smallbox.onmouseover = function () {
                that.mask.style.display = "block";
                that.bigbox.style.display = "block";
            }
        }
        //鼠标离开事件
        onmouseout() {
            let that = this;
            this.smallbox.onmouseout = function () {
                that.mask.style.display = "none";
                that.bigbox.style.display = "none";
            }
        }
        //鼠标移动事件
        onmousemove() {
            let that = this;
            this.smallbox.onmousemove = function (eve) {
                //mask跟随鼠标移动,且鼠标在mask的中心(先保存)
                let e = eve || event;
                let left = e.pageX - this.offsetLeft - (that.mask.offsetWidth) / 2;
                let top = e.pageY - this.offsetTop - (that.mask.offsetHeight) / 2;
                //判断边界
                if (left < 0) {
                    left = 0;
                }
                let maxleft = this.offsetWidth - that.mask.offsetWidth;
                if (left > maxleft) {
                    left = maxleft;
                }
                if (top < 0) {
                    top = 0;
                }
                let maxtop = this.offsetHeight - that.mask.offsetHeight;
                if (top > maxtop) {
                    top = maxtop;
                }
                //mask跟随鼠标移动,且鼠标在mask的中心
                that.mask.style.top = top + "px";
                that.mask.style.left = left + "px";
                //鼠标移动时让大盒子的背景图跟着移动
                let x = (left * that.bigbox.offsetWidth) / that.mask.offsetWidth;
                let y = (top * that.bigbox.offsetHeight) / that.mask.offsetHeight;
                //大背景图
                that.bigbox.style.backgroundPositionX = -x + "px";
                that.bigbox.style.backgroundPositionY = -y + "px";
            }
        }
    }
    let osmallbox = document.querySelector(".small-box");
    let omask = document.querySelector(".mask");
    let obigbox = document.querySelector(".big-box")
    let mg = new magnifier(osmallbox, omask, obigbox);
    mg.onmouseover();
    mg.onmouseout();
    mg.onmousemove();
</script>

以上是关于js面向对象实现放大镜的主要内容,如果未能解决你的问题,请参考以下文章

js用面向对象的方法编写放大镜

面向对象的放大镜

JQ面向对象的放大镜

js面向对象实现切换面板

JS中的面向对象编程

原生js面向对象实现简单轮播