原生JS放大镜特效实现教程：HTML/CSS/JS完整代码

原生JS放大镜特效实现教程

本文分享了一段使用JavaScript实现图片放大镜特效的具体代码，供读者参考学习。

关键属性与事件原理

在开始编码前，需要掌握几个关键的DOM属性与事件概念。

offsetWidth用于获取元素的宽度，offsetHeight用于获取元素的高度。offsetLeft在父元素未定位时返回元素距离页面左侧的距离，若父元素已定位，则返回距离父元素左侧的距离；同理，offsetTop在父元素未定位时返回距离页面上方的距离，父元素已定位时返回距离父元素上方的距离。scrollTop和scrollLeft分别表示内容滚动条滚动的上边距和左边距。此外，onmousemove用于监听鼠标移动事件，onmouseover用于监听鼠标移入事件。

核心实现思路

实现该特效的核心逻辑如下：

1.鼠标移动，阴影区跟随移动 2.鼠标移动，大图同步移动 3.阴影区域与小图的比例以及大图显示区域与大图的比例保持一致 4.确保阴影区域以及大div.big在鼠标移入div.small时可见

HTML结构搭建

HTML结构搭建如下：


<div id="fangdajing">
    <div class="small">
      <img src="small.jpg" alt="">
      <div class="shadow"></div>
    </div>
    <div class="big">
      <img src="big.jpg" alt="">
    </div>
  </div>

CSS样式设置

CSS样式设置如下：


//定位，大图显示区域和阴影区域最开始不显示
#fangdajing{
      width:450px;
      height:450px;
      position:relative;
    }
    .small{
      width:450px;
      height:450px;
      position:absolute;
      left:0px;
      top:0px;
    }
    .shadow{
      width:200px;
      height:200px;
      background:yellow;
      opacity:0.3;
      position:absolute;
      top:0;
      left:0;
      display:none;
    }
    .big{
      position:absolute;
      left:450px;
      width:356px;
      height:356px;
      overflow:hidden;
      display:none;
    }

JavaScript逻辑实现

JavaScript逻辑实现如下：

第一步，获取相关DOM对象。


var fdj = document.getElementById('fangdajing');
var big = document.getElementsByClassName('big')[0];
var small = document.getElementsByClassName('small')[0];
var shadow = document.getElementsByClassName('shadow')[0];

第二步，绑定鼠标的移入和移出事件。当鼠标移入小图区域时，显示大图显示区和阴影区；当鼠标移出时，隐藏这两个区域。


  small.onmouseover = function(){
        big.style.display = 'block';
        shadow.style.display = 'block';
  }

第三步，处理鼠标移动时的具体逻辑。

在鼠标移动事件中，首先计算阴影区在小图内的相对位置。已知鼠标点击位置距离页面的坐标、小图容器距离页面的坐标以及阴影区的宽高，通过计算使鼠标始终位于阴影区的中心点，从而得出阴影区相对于小图的left和top值。随后进行边界判断，确保阴影区不会移出小图范围，最后将计算结果赋值给阴影区的样式属性。

接着，根据阴影区的移动距离计算大图的滚动距离。大图滚动比例等于大图显示区域宽度（或高度）与阴影区宽度（或高度）的比值。以阴影区的左上角位置为基准，大图的滚动距离等于阴影区移动距离乘以该比例。最后，将计算出的值赋给大图的scrollTop和scrollLeft属性，实现大图同步滚动。


   small.onmousemove = function(ent){
    var e = ent || event;  //获取鼠标事件对象
    var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //获取shadow在small内的相对位置
    var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2;
    var tw = fdj.offsetWidth - shadow.offsetWidth; //获取shadow最大可移动距离
    var th = fdj.offsetHeight - shadow.offsetHeight; 
    //对shadow进行限制
    if(left < 0){
      left = 0;      
    }else if(left > tw){
      left = tw;
    }
     if(top < 0){
      top = 0;      
    }else if(top > th){
      top = th;
    } 
    //赋值
    small.style.left = left + 'px';
    small.style.top = top + 'px';    
    //大图跟着移动
    var sl = left * big.offsetWidth / shadow.offsetWidth;
    var st = top * big.offsetHeight / shadow.offsetHeight;
    big.scrollTop = st;
    big.scrollLeft = sl; 
  }

第四步，处理鼠标移出事件。当鼠标离开小图区域时，将大图显示区和阴影区的display属性设置为none，使其隐藏。


  small.onmouserout = function(){
    big.style.display = 'none';
    shadow.style.display = 'none';    
  }

以上即为使用原生JavaScript实现放大镜特效的完整教程，希望能为读者的前端学习提供有益帮助。

原生JS实现放大镜特效：原理与代码详解