html+css+原生js实现放大镜功能

一.放大镜效果展示

1.简单的放大镜功能

二. html代码

1.简单的html代码就不解释了，如果有什么不懂的可以评论或者私聊我，我为你解答。

  <div class="box" id="box">
        <div class="small" id="small">
            <img src="images/small.jpg" width="350" alt="" id="img1" />
            <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="big">
            <img src="images/big.jpg" alt="" id="img2" />
        </div>
    </div>

三. CSS代码

1.简单的CSS代码就不解释了，如果有什么不懂的可以评论或者私聊我，我为你解答。

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 350px;
            height: 350px;
            margin: 100px;
            border: 1px solid #ccc;
            position: relative;
        }

        .big {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 360px;
            border: 1px solid #ccc;
            overflow: hidden;
            display: none;
        }

        .big img {
            position: absolute;
            width: 800px;
        }

        .mask {
            width: 175px;
            height: 175px;
            background: rgba(255, 255, 0, 0.4);
            position: absolute;
            top: 0px;
            left: 0px;
            cursor: move;
            display: none;
        }

        .small {
            position: relative;
        }
    </style>

四. js代码

1.主要的js以注释其意义

<script>
        function $(id) {
            return document.getElementById(id)

        }
        //当鼠标滑入时，mask与big显示
        $('box').onmouseenter = function () {

            $('mask').style.display = 'block'
            $('big').style.display = 'block'

        }
        //当鼠标滑出时，mask与big显示
        $('box').onmouseleave = function () {
            $('mask').style.display = 'none'
            $('big').style.display = 'none'

        }

        $('box').onmousemove = function (e) {
            //判断e的兼容性
            e = e || window.event
            //求鼠标到box的X轴距离
            var x = e.pageX - $('box').offsetLeft;
            //求鼠标到box的Y轴距离
            var y = e.pageY - $('box').offsetTop;
            //求mask到box的X轴距离
            x = x - $('mask').offsetWidth / 2;
            //求mask到box的Y轴距离
            y = y - $('mask').offsetHeight / 2;
            //判断x是否小于0
            x = x < 0 ? 0 : x;
            //判断y是否小于0
            y = y < 0 ? 0 : y;
            //判断x是否大于mask在box的x轴中所能移动的最大值
            x = x > $('box').offsetWidth - $('mask').offsetWidth ? $('box').offsetWidth - $('mask').offsetWidth : x;
            //判断y是否大于mask在box的y轴中所能移动的最大值
            y = y > $('box').offsetHeight - $('mask').offsetHeight ? $('box').offsetHeight - $('mask').offsetHeight : y;
            //给mask移动赋值
            $('mask').style.top = y + 'px';
            $('mask').style.left = x + 'px';
            //mask移动的最大值
            var maxmx = $('box').offsetWidth - $('mask').offsetWidth;
            var maxmy = $('box').offsetHeight - $('mask').offsetHeight;
            //img2移动的最大值
            var maxi2x = $('img2').offsetWidth - $('big').offsetWidth;
            var maxi2y = $('img2').offsetHeight - $('big').offsetHeight;
            console.log(maxi2x);

            // 利用比例来求img2移动的距离

            //   mask移动的距离 / mask最大能够移动的距离  = 大图片移动的距离 / 大图片最大能够移动的距离

            //img2的移动大小
            imgX2 = maxi2x * x / maxmx;
            imgY2 = maxi2y * y / maxmy;
            //给img2移动赋值
            $('img2').style.left = -imgX2 + 'px'
            $('img2').style.top = -imgY2 + 'px'



        }
    </script>

以上是完整的放大镜代码，如果有什么不懂的可以评论或者私聊我，我为你解答，若是发现有错误，请指出谢谢，希望你们年薪过百万。