基础版放大镜--面向对象

  <style>
    .s-box,.l-box{width: 310px;height: 210px;position: absolute;top: 100px;}
    .s-box{left:50px;}
    .s-box img{width: 310px;height: 210px;}
    .s-box span{position: absolute;left: 0;top: 0;background-color: #000;opacity: .5;}

    .l-box{left: 400px;display: none;overflow: hidden;}
    .l-box img{width: 620px;height: 420px;position: absolute;left: 0;top: 0;}
  </style>

 <div class="s-box">
    <img src="img/img3.jpg" alt="">
    <span class="move"></span>
  </div>

  <div class="l-box">
    <img src="img/img3.jpg" alt="">
  </div>

function Magnifier() {
    this.sBox = document.querySelector(".s-box");
    this.span = document.querySelector(".s-box span");

    this.lBox = document.querySelector(".l-box");
    this.lImg = document.querySelector(".l-box img");
    // console.log(this.sBox, this.span, this.lBox, this.lImg);

    this.init(); // 2绑定事件
  }
  Magnifier.prototype.init = function(){
    var that = this;
    // 鼠标进入
    this.sBox.onmouseover = function(event){
        that.show();
    }
    this.sBox.onmouseout = function(){
        that.hide();
    }

    this.sBox.onmousemove = function(eve){
        console.log(eve);
        var e = eve || window.event;
        that.move(e);
    }
    // that.move();
  }
 
  Magnifier.prototype.show = function(){
    //   显示、计算span的宽高
    this.span.style.display = "block";
    this.lBox.style.display = "block";

    this.span.style.width = this.lBox.offsetWidth/this.lImg.offsetWidth * this.sBox.offsetWidth + "px";
    this.span.style.height = this.lBox.offsetHeight/this.lImg.offsetHeight * this.sBox.offsetHeight + "px";
    // console.log(this.lBox.offsetWidth, this.lImg.offsetWidth, this.sBox.offsetWidth);
    // console.log(this.span.style.width, this.span.style.height);
  }
  Magnifier.prototype.hide = function(){
    this.span.style.display = "none";
    this.lBox.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.lImg.style.left = x * (this.lBox.offsetWidth - this.lImg.offsetWidth) + "px";
    this.lImg.style.top = y * (this.lBox.offsetHeight - this.lImg.offsetHeight) + "px";  
  }
  
  new Magnifier();

    // 1、选元素
    // 2、绑定事件
    //     进入
    //         3-1、显示
    //         4、根据比例计算span的宽高
    //     离开
    //         3-2、隐藏
    //     移动
    //         5、span跟随鼠标
    //         6、边界限定

    //         7、计算比例
    //         8、移动右边大图