原生javascript实现图片放大镜效果

网络编程 2024/5/10 佚名

3 2 1

当我们在电商网站上购买商品时，经常会看到这样一种效果，当我们把鼠标放到我们浏览的商品图片上时，会出现类似放大镜一样的一定区域的放大效果，方便消费者观察商品。今天我对这一技术，进行简单实现，实现图片放大镜效果。
我在代码中进行了代码编写的思路的说明和详细的代码注释，方便读者，请看代码：

<html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
   *{margin:0px; padding:0px;}
   .small-box {
    width:300px;
    height:300px;
    margin-left:100px;
    margin-top:100px;
    border:1px #ccc solid;
    cursor:move;
    float:left;
    position:relative;
   }
   .small-box img {
    width:300px;
    height:300px;
   }
   .tool {
    width:150px;
    height:150px;
    background-color:gold;
    opacity:0.6;
    filter:alpha(opacity=60);
    position:absolute;
    left:0px;
    top:0px;
    display:none;
   }
   .tool.active {
    display:block;
   }
   .big-box {
    width:300px;
    height:300px;
    border:1px #ccc solid;
    overflow:hidden;
    float:left;
    margin-top:100px;
    position:relative;
    display:none;
   }
   .big-box.active {
    display:block;
   }
   .big-box img {
    width:600px;
    height:600px;
    position:absolute;
   }
  </style>
 </head>
 <body>
  <div class="small-box" id="smallBox">
   <img src="/UploadFiles/2021-04-02/img1.jpg">

这里，我并没有对代码中css样式，JavaScript行为进行和html结构的分离，方便读者阅读和运行。 


有读者可能考虑，获取事件对象的偏移距离时直接使用offsetX和offsetY属性，省去了计算，但是笔者在试验时，出现了异常，黄色放大区域并不能稳定的随着鼠标进行移动，笔者认为，当时用offsetX和offsetY时，执行onmousemove会不断地出发onmouseover，而onmouseover会产生事件传播，从而导致在获取offsetX时出现异常。最终，笔者采用上述代码中的方法，能够出现稳定的效果。读者可以自行运行代码，查看效果。这里附上笔者的效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。