JS图片放大镜效果

---

 

 

 

前言

我是一个小白   分享一个 图片放大镜 的案例   写的有哪些不到位的希望大家 多多指正

希望可以对一些 才学的人有帮助

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、js图片放大镜  的核心

其实就是 找到 小图和大图的比例关系

二、具体步骤

直接上代码

首先是结构代码

：然后是   样式

* {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 100px 0;
            width: 1000px;
            height: 1000px;
            background-color: #fff;
        }
        
        .left {
            position: relative;
            width: 300px;
            height: 300px;
            background-image: url(1.gif);
            background-size: 100%;
        }
        
        .mask {
            position: absolute;
            display: none;
            width: 200px;
            height: 200px;
            background-color: aqua;
            opacity: .5;
        }
        
        .right {
            display: none;
            position: absolute;
            top: 0;
            left: 350px;
            width: 500px;
            height: 500px;
            border: #333 1px solid;
            overflow: hidden;
        }
        
        .right img {
            position: absolute;
            width: 600px;
            height: 700px;
        }
    

 最后是   js代码   都在注释里面

 

 

 

 

---

总结

谢谢大家  有不足的地方可以给我留言哦