jQuery实现放大镜效果

放大镜效果想必大家并不陌生，在广泛的应用在各种线上商城的商品展示，那么今天为大家实现以下放大镜效果；

CSS样式：overflow:hidden 溢出隐藏；margin-left，margin-right 左右边距；

主要事件：鼠标事件mousemove()和mouseleave();不要忘记引入jQ文件!

效果图

1.html代码：

 <div id="box">
        <img src="./哈哈.jpg" alt="">//正常显示的图片
        <div id="xiao"></div>
    </div>
    <div id="box2">
        <img src="./哈哈.jpg" alt="" id="big">//要放大的图片
    </div>

2.css样式代码：

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

        #box {
     
            /* margin: 100px; */
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }

        #box img {
     
            width: 100%;
            height: 100%;
        }

        #box2 {
     
            width: 200px;
            height: 200px;
            border: 1px solid black;
            position: absolute;
            top: 0;
            left: 200px;
            overflow: hidden;
        }

        #box2 img {
     
            width: 400px;
            height: 400px;
            position: absolute;
            /* left:-120px;
            top:-100px */
        }

        #xiao {
     
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

3.jQuery部分：

<script>
        $("#box").on("mousemove", function (event) {
     
            $("#xiao").show();
            $("#box2").show();
            var mX = event.pageX;
            var mY = event.pageY;
            var xiaoX = mX / 2;
            var xiaoY = mY / 2;
            // 遮罩层 位置
            $("#xiao").css({
     
                top: xiaoY,
                left: xiaoX
            })
            // 大图的位置
            $("#big").css({
     
                top: - xiaoY * 2,
                left: - xiaoX * 2
            })
        }).on("mouseleave", function () {
     
            $("#xiao").hide();
            $("#box2").hide();
        })
    </script>