JavaScript原生实现放大镜效果

最新推荐文章于 2024-07-17 15:26:15 发布

青田。

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125358477

版权

JavaScript 同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

一、页面HTML布局

<body>
    <div class="small-box">
        <div class="mask"></div>
    </div>
    <div class="big-box"></div>
    <div id="small-pic">
        <img src="img/0.jpg" alt="">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt=""> 
    </div>
</body>

二、页面css样式

 <style>
        .small-box {
            width: 400px;
            height: 400px;
            background-image: url(img/0.jpg);
            background-size: 400px 400px;
            position: absolute;
            left: 100px;
            top: 100px;
            cursor: move;
        }
        .big-box {
            height: 400px;
            width: 400px;
            background-image: url(img/0.jpg);
            background-size: 1600px 1600px;
            left: 600px;
            top: 100px;
            position: absolute;
            display: none;
        }
        .mask {
            height: 100px;
            width: 100px;
            background-color: orange;
            opacity: 0.3;
            position: absolute;
            display: none;
        }
        #small-pic {
            width: 440px;
            height: 110px;
            position: absolute;
            top: 520px;
            left: 84px;
            display: flex;
            /* border: 1px solid red; */
            justify-content: space-around
           
        }
        #small-pic img {
            width: 100px;
            height: 100px;
            margin-left: 6px;  
        }
    </style>

三、js代码

<script>
    class Magnifier {
        constructor(newSmallBox,newBigBox,newMask,bigImg) {
            this.smallBox = newSmallBox;
            this.bigBox = newBigBox;
            this.mask = newMask;
            this.bigImg = bigImg;
        }
        // 鼠标移进时外面大盒子和遮罩层显示
        onmouseover() {
            let that = this;
            this.smallBox.onmouseover = function() {
                that.bigBox.style.display = "block";
                that.mask.style.display = "block";
            }
        }
        // 同样鼠标移出时隐藏
        onmouseout() {
            let that = this;
            this.smallBox.onmouseout = function() {
                that.bigBox.style.display = "none";
                that.mask.style.display = "none";
            }
        }
        // 在鼠标指针移到指定的元素
        onmousemove() {
            let that = this;
            this.smallBox.onmousemove = function(evt) {
                let e = evt || event;
                let left = e.pageX - that.smallBox.offsetLeft - that.mask.offsetWidth/2;
                let top = e.pageY - that.smallBox.offsetTop - that.mask.offsetHeight/2;
                // 边界判断
                if(left < 0) {
                    left = 0;
                }
                let maxLeft = that.smallBox.offsetWidth - that.mask.offsetWidth;
                if(left > maxLeft) {
                    left = maxLeft;
                }
                if(top < 0) {
                    top = 0;
                }
                let maxTop = that.smallBox.offsetHeight - that.mask.offsetHeight;
                if(top > maxTop) {
                    top = maxTop;
                }
                that.mask.style.left = left + "px";
                that.mask.style.top = top + "px";
                // 小图片：大图片 = 小窗口: 大窗口
                let x = that.bigBox.offsetWidth*left/that.mask.offsetWidth;
                let y = that.bigBox.offsetHeight*top/that.mask.offsetHeight;

                that.bigBox.style.backgroundPositionX = -x + "px";
                that.bigBox.style.backgroundPositionY = -y + "px";
            }
        }
        // 点击切换图片
        onclick() {
            let that = this;
            for (let i = 0; i < this.bigImg.length; i++) {
                this.bigImg[i].onclick = function() {
                    that.smallBox.style.backgroundImage = `url(img/${i}.jpg)`;
                    that.bigBox.style.backgroundImage = `url(img/${i}.jpg)`;
                }
            }
        }
    }
    let bigImg = document.querySelectorAll("img");
    let oSmallBox = document.getElementsByClassName("small-box")[0];
    let oBigBox = document.getElementsByClassName("big-box")[0];
    let oMask = document.getElementsByClassName("mask")[0];
    let s = new Magnifier(oSmallBox,oBigBox,oMask,bigImg);
    s.onmouseover();
    s.onmouseout();
    s.onmousemove();
    s.onclick();
</script>