原来js实现的放大镜效果要这么做，购物商城可使用噢

Tesia ·

更新时间:2024-09-20

· 778 次阅读

话不多说，直接看源码
css部分

.s_box{width:400px;height: 300px;position: absolute;left: 50px;top:100px;}
    .s_box img{width: 400px;height: 300px;}
    .s_box span{width: 130px;height: 100px;background: rgba(200,200,200,0.5);position: absolute;left:0;top:0;display: none;cursor:move;}
    .b_box{width: 400px;height: 300px;overflow: hidden;position: absolute;left:500px;top:100px;display: none;}
    .b_box img{width: 1200px;height: 900px;position: absolute;left:0;top:0;}
    .list{margin: 0;padding: 0;list-style: none;position: absolute;left:50px;top:430px;}
    .list li{float: left;margin: 0 10px;}
    .list li img{width: 100px;height: 80px;}

html部分，注意，这里的图片路径是我的文件夹路径，如果需要使用，要换成自己的

js部分，附有思路分析和代码注释噢


    // 放大镜不是真正的放大镜，是一种视觉欺骗，其实就是等比例移动
    // 分析:
    //     1.选择元素
    //     2.绑定事件
    //         3.进入
    //             显示元素
    //         4.移动
    //             遮罩层跟随鼠标移动
    //             的同时
    //             计算遮罩层的移动比例
    //             右侧大图，等比例移动
    //         5.离开
    //             隐藏元素
    class Large{
        constructor(){
            this.sBox = document.querySelector(".s_box");
            this.sImg = document.querySelector(".s_box img");
            this.sSpan = document.querySelector(".s_box span");
            this.bBox = document.querySelector(".b_box");
            this.bImg = document.querySelector(".b_box img");
            // 点击小图切换大图的按钮
            this.li = document.querySelectorAll(".list li");
        }
        addEvent(){
            var that = this;
            this.sBox.onmouseover = function(){
                that.over();
            }
            this.sBox.onmousemove = function(eve){
                var e = eve || window.event;
                that.move(e);
            }
            this.sBox.onmouseout = function(){
                that.out();
            }
            // 切换图片按钮的点击事件：根据布局做出调整
            for(var i=0;i<this.li.length;i++){
                this.li[i].onclick = function(){
                    // that
                    // console.log(this);
                    // console.log(this.children[0]);
                    // console.log(this.children[0].src);
                    that.sImg.src = this.children[0].src;
                    that.bImg.src = this.children[0].src;
                }
            }
        }
        over(){
            this.sSpan.style.display = "block";
            this.bBox.style.display = "block";
        }
        move(e){
            // 计算遮罩层跟随鼠标移动时的left和top
            var l = e.pageX - this.sBox.offsetLeft - this.sSpan.offsetWidth/2;
            var t = e.pageY - this.sBox.offsetTop - this.sSpan.offsetHeight/2;
            // 边界限定
            if(l<0) l=0;
            if(t this.sBox.offsetWidth - this.sSpan.offsetWidth){
                l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
            }
            if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
                t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
            }
            // 设置遮罩层的位置
            this.sSpan.style.left = l + "px";
            this.sSpan.style.top = t + "px";
            // 比例的计算公式
            // A教室，共100个座位，其中有13个座位是空的
                // 当前值 / 总值，得到的就是比例
            // 需要将B教室，共有89个座位，需要将B教室的座位闲置率和A教室保持一致
                // 上一步得到的比例 * 另一个总值，得到的是另一个教室的当前值
            // 根据遮罩层移动的距离计算比例
            var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
            var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
            // 根据上一步得到的比例，计算右侧大图要移动的当前值
            this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
            this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
        }
        out(){
            this.sSpan.style.display = "none";
            this.bBox.style.display = "none";
        }
    }
    // 启动
    var l = new Large();
    l.addEvent();

就这样，一个简单的放大镜效果就出来了，做购物商城的小伙伴可以使用这个模拟商城放大细节效果噢

作者：LL-Echo

js实现商城购物商城 js

1024 个赞