前言

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

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

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

一、js图片放大镜的核心

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

二、具体步骤

直接上代码

首先是结构代码

 <div class="box">
        <div class="left">
            <div class="mask"></div>
            <div class="right">
                <img src="1.gif" alt="">
            </div>
        </div>










    </div>

：然后是样式

* {
            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;
        }
    </style>

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

javascript">  <script>
        var left = document.querySelector('.left');
        var mask = document.querySelector('.mask ');
        var right = document.querySelector('.right');
        var big_img = document.querySelector('.right').querySelector('img');
        left.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            right.style.display = 'block';

        }); //鼠标经过 左边盒子  显示蒙版   和右边的大盒子  
        left.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            right.style.display = 'none';

        }); //鼠标离开  蒙版  和右边的大盒子隐藏 
        left.addEventListener('mousemove', function(e) {
            var x = e.pageX - this.offsetLeft; //求出鼠标距离left盒子左侧边缘的距离
            var y = e.pageY - this.offsetTop; //求出鼠标距离left盒子上方边缘的距离

            var maskx = x - mask.offsetWidth / 2; //为了使鼠标一直在蒙版的中心位置  所以把蒙版的left往左偏移 一半
            var masky = y - mask.offsetHeight / 2; //为了使鼠标一直在蒙版的中心位置  所以把蒙版的top往下偏移 一半
            var max_x = big_img.offsetWidth - right.offsetWidth; //求出 大盒子的横向最大移动距离
            var max_y = big_img.offsetHeight - right.offsetHeight; //求出大盒子的纵向最大移动距离
            var mix_x = this.offsetWidth - mask.offsetWidth; //小盒子的横向最大移动距离
            var mix_y = this.offsetHeight - mask.offsetHeight; //小盒子的纵向最大移动距离
            if (maskx <= 0) {
                maskx = 0; //当蒙版的left小于0  的时候 蒙版的left等于0

            } else if (maskx > (this.offsetWidth - mask.offsetWidth)) {
                maskx = (this.offsetWidth - mask.offsetWidth) //当蒙版的left超出最大横向移动距离的时候 蒙版的left等于横向最大移动距离
            }
            if (masky <= 0) {
                masky = 0;

            } else if (masky >= (this.offsetHeight - mask.offsetHeight)) {
                masky = (this.offsetHeight - mask.offsetHeight);
            } //同上   这是纵向  Y
            mask.style.top = masky + 'px';
            mask.style.left = maskx + 'px'; //设置蒙版的x,y



            var big_x = max_x / mix_x * maskx; //比例关系  （用蒙版在left盒子的横向最大移动距离比上图片在right盒子的横向最大移动距离）*蒙版横向移动的距离
            var big_y = max_y / mix_y * masky; //（用蒙版在left盒子的纵向最大移动距离比上图片在right盒子的纵向最大移动距离）*蒙版纵向移动的距离
            big_img.style.top = -big_y + 'px';
            big_img.style.left = -big_x + 'px';






        })
    </script>