jQuery实现放大镜效果

今天就给可爱的你们介绍jQuery实现图片局部放大镜效果，以下只是参考图啊（因为小姐姐喜欢lisa 哈哈哈）

放大镜效果的基本原理就是按照一个合适的比例去放大对应的相对的图片，同时放大镜部分和被放大图片的移动距离都要等比例的放大。
HTML代码如下：

 <!--    	thumbnail   缩略图
            original    原图
            magnifier   放大镜 -->
    <div class="thumbnail">
        <img src="./1.jpg" alt="">
        <div class="magnifier"></div>
    </div>
    <div class="original">
        <img src="./1.jpg" alt="">
    </div>

css样式如下：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .thumbnail,.original{
            width: 400px;
            height: 400px;
            position: absolute;

        }
        .original{
            top: 0;
            left: 450px;
            overflow: hidden;
            display: none;
        }
        .thumbnail>img{
            width: 400px;
            height: 400px;
            position: absolute;
        }
        .original>img{
            width: 800px;
            height: 800px;
            position: absolute;
        }
        .magnifier{
            width: 200px;
            height: 200px;
            background: rgba(34, 33, 33, 0.4);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>

js代码如下：

<script>
        $(".thumbnail").mouseover(function(){
            $(".magnifier").show()
            $(".original").show()
        })

        $(".thumbnail").mousemove(function(event){
            //鼠标相对 页面 X Y轴的位置
            var ymX=event.pageX;
            var ymY=event.pageY;
            //鼠标  放在遮罩层中间的位置
            var mX=ymX/2;
            var mY=ymY/2;
            //放大镜位置
             $(".magnifier").css({
                top: mY +"px",
                left:mX+"px"
            })
			// 原图 位置
            $(".original>img").css({
                top:-mY*2+"px",
                left:-mX*2+"px",
            })
        })
        // 鼠标离开 隐藏 放大镜 ，原图
        $(".thumbnail").mouseleave(function(){
            $(".magnifier").hide()
            $(".original").hide()
        })
    </script>

最后我想问问认真看完的同学们，你们喜欢 iu 还是 lisa 呢，这个回答很重要喔，评论评论

标签：jQuery,效果,放大镜,px,thumbnail,400px,height,original
来源： https://blog.csdn.net/Liang_nm/article/details/112722620