jQuery实现放大镜效果

简介：这里我使用了一张本地图片，每当鼠标移动到图片上，生成另一张图片也就是放大后的一块区域

一引入jQuery

 <script src="jquery-3.5.1.js"></script>

二，图片的样式

<style>
        *{
     
            margin: 0;
            padding: 0;
        }
        #box{
     
            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;
        }
        #xiao{
     
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            top:0;
            left: 0;
        }
    </style>

三，布局的模块

<div id="box">
        <img src="img/1.jpg" alt="">
        <div id="xiao"></div>
    </div>
    <div id="box2">
        <img src="img/1.jpg" id="big" alt="">
    </div>

四，css的代码操作

 <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();
        })

各位兄台路过请点个赞是对老铁最大的帮助 ，抱拳！