原生JS实现简单放大镜效果

网络编程 2025/1/13 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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

<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 img{
 vertical-align: top;
 }
 .fdj {
 width: 350px;
 height: 350px;
 position: relative;
 margin: 100px auto;
 border: 1px solid gainsboro;
 }
 .small {
 position: relative;
 }
 .small img {
 width: 350px;
 }
 .mask {
 width: 100px;
 height: 100px;
 background: rgba(255, 255, 0, 0.4);
 position: absolute;
 left: 0;
 top: 0;
 cursor: move;
 display: none;
 }
 .big {
 position: absolute;
 top: 0;
 left: 360px;
 width: 500px;
 height: 500px;
 border: 1px solid gainsboro;
 overflow: hidden;
 display: none;
 }
 .big img{
 position: absolute;
 left: 0;
 top: 0;
 }
 </style>
 </head>

 <body>
 <div class="fdj">
 <div class="small">
 <img src="/UploadFiles/2021-04-02/162503mw0fawb5b02va22i.jpg">

效果图：（演示）

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