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

<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时出现异常。最终,笔者采用上述代码中的方法,能够出现稳定的效果。读者可以自行运行代码,查看效果。这里附上笔者的效果图:

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

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

标签:
js,放大镜

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“原生javascript实现图片放大镜效果”

暂无“原生javascript实现图片放大镜效果”评论...