使用JavaScript实现放大镜的效果

最新推荐文章于 2021-11-10 16:54:59 发布

哦呼m

最新推荐文章于 2021-11-10 16:54:59 发布

阅读量166

点赞数 2

本文链接：https://blog.csdn.net/weixin_42272688/article/details/100186193

版权

要实现的效果：

鼠标放上去会有半透明遮罩、右边会有大图片局部图
鼠标移动时右边的大图片也会局部运动

涉及到的事件及尺寸：

鼠标事件的捕获：onmouseover（进入）、onmouseout（移除）、onmousemove（移动）
offsetLeft、offsetTop、offsetWidth、offsetHeight、event.clientX、event.clientY0

话不多说，直接上代码吧


    <div id="small">
       <img src="./images/3.jpg" />
       <p id="move"></p>
    </div>
    <div id="big">
         <img src="./images/3.jpg" id="look_girl" />
    </div>

在这里首先我们要先写一个小的div，里面放图片和滑块(move)，再写一个大的div用来显示放大之后的效果，注意在初始状态下，滑块和大div都是默认隐藏的。

下面我们来写js代码


     /****让黑色的滑块动起来***/
   function Big(){
   // 1 获取节点
   this.smallObj = document.getElementById('small');
   this.moveObj = document.getElementById('move');
   this.bigObj  = document.getElementById('big');
   this.girlObj  =  document.getElementById('look_girl');

   // 调用鼠标事件绑定的方法
   this.move();
   // 鼠标移走事件
   this.leave();
 
   }

获取节点，绑定事件，在这里我们因为我们需要重复利用鼠标移动和鼠标离开事件，我们要提前封装函数


     // 2 给sall绑定鼠标移动事件
   Big.prototype.move = function(){
       //console.log(this)  //Big
       var that = this;// 保存当前this的指向
        this.smallObj.onmousemove = function(eve){
           // console.log(this);  // <div id="small">
            var e = eve || window.event;   
             // 获取鼠标的实时位置
            that.mouseX = e.clientX;
            that.mouseY = e.clientY;
            //调用滑块的方法
            that.movePos();
            // 调用大图方法
            that.bigImg();
        }

添加鼠标移动事件，注意兼容！！！


  // 3 滑块位置设定的方法
   Big.prototype.movePos = function(){
  // 4计算move的left和top
       this.moveLeft = this.mouseX-this.smallObj.offsetLeft-this.moveObj.offsetWidth/2;
       this.moveTop = this.mouseY - this.smallObj.offsetTop-this.moveObj.offsetHeight/2;
       console.log(this.moveLeft,this.moveTop);
         //5 设置move的移动边界
         //设置左边距
        if(this.moveLeft<0) this.moveLeft=0;
        // 设置右边
        var endLeft = this.smallObj.offsetWidth-this.moveObj.offsetWidth
        if(this.moveLeft>endLeft) this.moveLeft = endLeft;
        if(this.moveTop<0) this.moveTop=0;
        // 设置最大下边距
         var endTop = this.smallObj.offsetHeight-this.moveObj.offsetHeight;
         if(this.moveTop>endTop) this.moveTop=endTop;
       // 设置move的实时的位置
       this.moveObj.style.left = this.moveLeft+'px';
       this.moveObj.style.top = this.moveTop+'px';
       //让滑块显示出来
       this.moveObj.style.display = 'block';
       // 调用大图的方法
    //    this.bigImg();
   }


   // 将大图再封装一个方法

   Big.prototype.bigImg = function(){
      this.bigObj.style.display = 'block';
//       // 1 设置大图的left top位置
      this.bigObj.style.left = this.smallObj.offsetLeft+this.smallObj.offsetWidth+'px';
      this.bigObj.style.top = this.smallObj.offsetTop+'px';

      //       距离左边left    图片宽度           盒子宽度          距离左边left    图片宽度           盒子宽度
      //  big_x/(look_girl.offsetWidth-big.offsetWidth) = move_left/(small.offsetWidth-move.offsetWidth);
       var girlLeft = this.moveLeft/(this.smallObj.offsetWidth-this.moveObj.offsetWidth)*(this.bigObj.offsetWidth-this.girlObj.offsetWidth);
       var girlTop = this.moveTop/(this.smallObj.offsetHeight-this.moveObj.offsetHeight)*(this.bigObj.offsetHeight-this.girlObj.offsetHeight);
           console.log(girlLeft,girlTop);
        //2 给图片设置位置
        this.girlObj.style.top = girlTop+'px';
        this.girlObj.style.left = girlLeft+'px';
   }

    // 封装鼠标移开的方法
    Big.prototype.leave=function(){
        var that = this;
       that.smallObj.onmouseleave = function(){
         that.moveObj.style.display = 'none';
         that.bigObj.style.display = 'none';
    }
    }
   new Big();