本文实例为大家分享了原生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">

效果图:(演示)

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

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

标签:
js,放大镜

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

评论“原生JS实现简单放大镜效果”

暂无“原生JS实现简单放大镜效果”评论...