基于javascript实现放大镜特效

(编辑：jimmy 日期: 2024/11/6 浏览：3 次 )

本文实例为大家分享了javascript实现放大镜特效的具体代码，供大家参考，具体内容如下

我们在逛pc端商城时，鼠标放到商品上经常会看到一个类似放大镜效果的蒙层，

<!DOCTYPE html>
<html>

<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  
  #min {
   width: 350px;
   height: 350px;
   border: 1px solid #ccc;
   position: absolute;
   left: 50px;
   top: 50px;
  }
  
  #min img {
   width: 350px;
   height: 350px;
  }
  
  #max {
   width: 500px;
   height: 500px;
   position: absolute;
   left: 500px;
   top: 50px;
   border: 1px solid #ccc;
   overflow: hidden;
   display: none;
  }
  
  #max img {
   position: absolute;
   left: 0;
   top: 0;
  }
  
  #mask {
   width: 200px;
   height: 200px;
   background: rgba(255, 0, 0, 0.5);
   position: absolute;
   left: 0px;
   top: 0px;
   cursor: pointer;
   display: none;
  }
 </style>
</head>

<body>
 <div id="min">
  <img src="/UploadFiles/2021-04-02/min.jpg">

效果图：

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

上一篇：为什么JavaScript中0.1 + 0.2 != 0.3
下一篇：javascript实现时钟动画