[前端练习小Demo]图片放大镜效果

Posted 2020-10-26 wq-study

最终效果展示：

 

JS部分：

window.onload=function(){
   var normal = document.getElementById(‘normal‘);
   var lay = document.getElementById("lay");
   var bigImg = document.getElementById("bigImg");
   var img = bigImg.getElementsByTagName(‘img‘)[0];
   
   normal.onmouseover=function(){  //鼠标移入事件
      lay.style.display="block";
      bigImg.style.display="block";
   }
   normal.onmouseout=function(){  //鼠标移出事件
      lay.style.display="none";
      bigImg.style.display="none";
   }
   
   normal.onmousemove=function(){ //鼠标移动事件
      var ev=ev||event;
      var scale=4;                //放大比例
      var x=ev.clientX-lay.offsetWidth/2-normal.offsetLeft;//放大镜左边框距离父盒子左边框的距离
      var y=ev.clientY-lay.offsetHeight/2-normal.offsetTop;//放大镜上边框距离父盒子上边框的距离
      if(x<0){
         x=0
      }
      if(x>normal.offsetWidth-lay.offsetWidth){
         x=normal.offsetWidth-lay.offsetWidth;
      }
      if(y<0){
         y=0
      }
      if(y>normal.offsetHeight-lay.offsetHeight){
         y=normal.offsetHeight-lay.offsetHeight
      }
      lay.style.width=parseInt(normal.offsetWidth/scale)+‘px‘;//放大镜宽
      lay.style.height=parseInt(normal.offsetHeight/scale)+‘px‘;//放大镜高
      img.style.width=normal.offsetWidth*scale+‘px‘;//放大以后的图片宽
      img.style.height=normal.offsetHeight*scale+‘px‘;//放大以后的图片高
      
      lay.style.left=x+‘px‘;//放大镜跟着光标移动
      lay.style.top=y+‘px‘;
      
      var left=scale*lay.offsetLeft;
      var top=scale*lay.offsetTop;
      img.style.left= -left+‘px‘;//放大后的图片需要移动的坐标
      img.style.top= -top+‘px‘;
   }
}