放大镜案例

最新推荐文章于 2024-10-10 10:50:43 发布

茹嗨瑞

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量67

点赞数

分类专栏： # JavaScript学习笔记

本文链接：https://blog.csdn.net/m0_53181852/article/details/126838838

版权

javascript 前端 html

JavaScript学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

放大镜

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .small-box {
            width: 200px;
            height: 200px;
            background-image: url(img/tou8.png);
            background-size: 200px 200px;
            position: absolute;
            top: 100px;
            left: 200px;
        }

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

        .big-box {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 450px;
            top: 100px;
            background-image: url(img/tou8.png);
            background-size: 800px 800px;
            display: none;
        }

        ul {
            width: 200px;
            height: 50px;
            /* background-image: url(img/tou8.png); */
            /* background-size: 200px 200px; */
            position: absolute;
            top: 300px;
            left: 200px;
            padding-left: 0;
            margin: 0;
        }

        li {
            list-style: none;
            width: 40px;
            height: 40px;
            float: left;
            background-color: yellowgreen;
            /* background-image: url(img/tou8.png); */
            background-size: 40px;
        }
    </style>
</head>

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

</html>
<script src="放大镜.js"></script>
<script>
    let oSb = document.querySelector(".small-box");
    let oM = document.querySelector(".mask");
    let oBb = document.querySelector(".big-box");
    // console.log(oSb);
    let oUl = document.querySelector("ul");
    let oLi = document.getElementsByTagName("li");


    let b = new BF(oSb, oM, oBb, oUl, oLi);

</script>

class BF {
    constructor(osb, om, obb, oul, oli) {
        this.oSb = osb;
        this.oM = om;
        this.oBb = obb;
        this.oUl = oul;
        this.oLi = oli;

        this.eventBind();
    }


    // 鼠标移入小盒子的时候mask盒子和最大的盒子出现
    mouseover() {
        let that = this;
        // console.log(5665);
        this.oSb.onmouseover = function () {
            // mask盒子出现
            that.oM.style.display = "block";
            that.oBb.style.display = "block";
            // console.log(5665);
        }
    }

    // 鼠标移出小盒子的时候mask盒子和最大的盒子消失
    mouseout() {
        let that = this;
        // console.log(5665);
        this.oSb.onmouseout = function () {
            // mask盒子出现
            that.oM.style.display = "none";
            that.oBb.style.display = "none";
            // console.log(5665);
        }
    }

    // 鼠标在小盒子中移动mask随着鼠标移动
    mousemove() {
        // 小盒子的变化
        let that = this;
        // console.log(5665);
        this.oSb.onmousemove = function (evt) {
            var e = evt || event;
            // mask盒子位置移动
            // mask盒子的位置
            let left = e.pageX - that.oM.offsetWidth / 2 - this.offsetLeft;
            let top = e.pageY - that.oM.offsetHeight / 2 - this.offsetTop;
            // mask盒子移动的边界问题
            // 左边界
            if (left < 0) {
                left = 0
            }
            // 上边界
            if (top < 0) {
                top = 0
            }
            // 右边界
            let maxLeft = that.oSb.offsetWidth - that.oM.offsetWidth;
            if (left > maxLeft) {
                left = maxLeft;
            }
            // 下边界
            let maxTop = that.oSb.offsetHeight - that.oM.offsetHeight;
            if (top > maxTop) {
                top = maxTop;
            }

            // mask盒子变化的时候大盒子背景图片移动
            // 当mask移动的时候大盒子背景按一定比例的移动；小图片/大图片 = 小窗口/大窗口

            // 比例
            let n = that.oBb.offsetWidth / that.oM.offsetWidth;
            // console.log(n);
            let x = n * left;
            let y = n * top;
            // 大窗口背景的移动位置
            that.oBb.style.backgroundPositionX = -x + "px";
            that.oBb.style.backgroundPositionY = -y + "px";

            that.oM.style.left = left + "px";
            that.oM.style.top = top + "px";
            // console.log(5665);
        }
    }

    // 当鼠标划入li时li里的图片显示到小盒子上
    mouseoverLi() {
        let that = this;
        // console.log(1);
        for (let i = 0; i < this.oLi.length; i++) {
            // this.oLi[i].style.backgroundImage = `url(img/0.jpg)`;
            this.oLi[i].style.backgroundImage = `url(img/${i}.jpg)`;
            this.oLi[i].onmouseover = function () {
                // console.log(1);
                // that.oSb.style.backgroundImage = this.backgroundImage;
                // 也可以先读后写
                // that.oSb.style.backgroundImage = getComputedStyle(oLi[i], false)["backgroundImage"];
                // 也可以直接给
                that.oSb.style.backgroundImage = `url(img/${i}.jpg)`;
                that.oBb.style.backgroundImage = `url(img/${i}.jpg)`;
            }
        }
    }


    eventBind() {
        this.mouseover();
        this.mousemove();
        this.mouseout();
        this.mouseoverLi();
    }
}