原生js实现放大镜效果-蒲公英云

原生js实现放大镜效果

今天是中秋佳节，在这了我祝大家中秋快乐，心想事成，工作顺利哈！

放大镜效果在电商网站上较为常见的一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示
在这里插入图片描述

分析页面可知，页面主要分为三个部分，左侧图片缩略图，鼠标滑动版，右侧原图。

HTML

两个div搞定。s_box为缩略图，b_box右侧为原图，span为鼠标移动时的放大区域。

<div class="s_box">
        <img src="img/img1.jpg" alt="">
        <span></span>
    </div>
    <div class="b_box">
        <img src="img/img1.jpg" alt="">
    </div>

CSS

要点定位问题，通过位置，显示右侧原图的部分区域，所谓的放大并不是真的放大，而是只呈现了原图的部分区域。

.s_box,
      .b_box { 
        width: 400px;
        height: 300px;
        position: absolute;
        top: 100px;
      }
      .s_box { 
        left: 50px;
      }
      .s_box img { 
        width: 400px;
        height: 300px;
      }
      .s_box span { 
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(200, 200, 200, 0.5);
        display: none;
      }
      .b_box { 
        left: 500px;
        display: none;
        overflow: hidden;
      }
      .b_box img { 
        width: 1200px;
        height: 900px;
        position: absolute;
        left: 0;
        top: 0;
      }

js 控制滑块位置，及右侧图片显示区域。

这里我是用的是面向对象编程，不知为啥特别钟爱面向对象编程

function Magnifier(){ 
        // 1.选元素
        this.sBox = document.querySelector(".s_box");
        this.span = document.querySelector(".s_box span");
        this.bBox = document.querySelector(".b_box");
        this.bImg = document.querySelector(".b_box img");
        // 2.绑定事件
        this.init()
    }
    Magnifier.prototype.init = function(){ 
        var that = this;
        // 进入
        this.sBox.onmouseover = function(){ 
            // 3-1.显示，计算span的宽高
            that.show()
        }
        // 离开
        this.sBox.onmouseout = function(){ 
            // 3-2.隐藏
            that.hide()
        }
        // 移动
        this.sBox.onmousemove = function(eve){ 
            var e = eve || window.event;
            // 5.span跟随鼠标
            that.move(e)
        }
    }
    Magnifier.prototype.show = function(){ 
        // 显示，计算span的宽高
        this.span.style.display = "block";
        this.bBox.style.display = "block";
        this.span.style.width = this.bBox.offsetWidth / this.bImg.offsetWidth * this.sBox.offsetWidth + "px";
        this.span.style.height = this.bBox.offsetHeight / this.bImg.offsetHeight * this.sBox.offsetHeight + "px";
    }
    Magnifier.prototype.hide = function(){ 
        // 隐藏
        this.span.style.display = "none";
        this.bBox.style.display = "none";
    }
    Magnifier.prototype.move = function(e){ 
        // 计算移动的距离
        var l = e.clientX - this.sBox.offsetLeft - this.span.offsetWidth/2;
        var t = e.clientY - this.sBox.offsetTop - this.span.offsetHeight/2;
        // 边界限定
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.sBox.offsetWidth - this.span.offsetWidth){ 
            l=this.sBox.offsetWidth - this.span.offsetWidth
        }
        if(t>this.sBox.offsetHeight - this.span.offsetHeight){ 
            t=this.sBox.offsetHeight - this.span.offsetHeight
        }
        // span跟随鼠标
        this.span.style.left = l + "px";
        this.span.style.top = t + "px";
        // 计算比例
                // 当前值 / 总值，得到的就是比例
        var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
        var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);
        // 根据比例计算右边大图应该移动的距离
                                // 比例 * 总值，得到的就是当前应该移动的距离
        this.bImg.style.left = x * (this.bBox.offsetWidth - this.bImg.offsetWidth) + "px";
        this.bImg.style.top = y * (this.bBox.offsetHeight - this.bImg.offsetHeight) + "px";
    }
    new Magnifier();