jq实现放大镜效果

最新推荐文章于 2023-01-14 21:47:59 发布

JokerMock

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量436

点赞数 1

文章标签： javascript 前端 html jquery

本文链接：https://blog.csdn.net/zzll1216/article/details/125282770

版权

该博客介绍了一个使用jQuery实现的图片预览和缩放功能。当鼠标进入预览区域时，会出现一个半透明的遮罩和放大后的图片，随着鼠标的移动，遮罩和大图会相应地跟随移动，提供动态的预览体验。CSS用于定义布局和样式，JavaScript部分的代码主要负责事件监听和元素位置的动态调整。

摘要由CSDN通过智能技术生成

需引入 jquery 框架

效果图

html部分：


    <div class="preview">
        <img src="./img/柯南2.webp" alt="">
       <div class="mask"></div>
       <div class="big">
           <img src="./img/柯南2.webp" alt="" class="big_img">
       </div>
   </div>

css部分


    * {
        padding: 0;
        margin: 0;
    }
    .preview {
        width: 500px;
        height: 500px;
        margin-left: 30px;
        border: 1px solid #000;
        text-align: center;
        position: relative;
    }
    .preview>img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        object-position: 0 0;
    }
    .mask {
        display: none;
        width: 200px;
        height: 200px;
        background-color: #fede4f;
        opacity: 0.5;
        position: absolute;
        top: 0;
        left: 0;
    }
    .big {
        display: none;
        width: 500px;
        height: 500px;
        background-color: pink;
        position: absolute;
        top: 0;
        left: 510px;
        z-index: 999;
        overflow: hidden;
    }
    .big>img {
        width:1200px;
        position: absolute;
        top: 0;
        left: 0;
    }

javascript部分：


    $(document).ready(function(){
        $(".preview").on("mouseenter",function(){
            $(".mask").show()
            $(".big").show()
        })
        $(".preview").on("mouseleave",function(){
            $(".mask").hide()
            $(".big").hide()
        })
        $(".preview").on("mousemove",function(e){
            //在x轴移动的距离
            var x=e.pageX-$('.preview').offset().left
            var y=e.pageY-$('.preview').offset().top
            
            //遮罩中心点在x轴移动的距离
            var maskX=x-$(".mask").width()/2
            var maskY=y-$(".mask").height()/2
            // $(".mask").css("left",maskX+"px").css("top",maskY+"px")
            console.log(maskX);
            if(maskX<=0){
                maskX=0
            }else if(maskX>=$('.preview').width()-$(".mask").width()){
                maskX=$('.preview').width()-$(".mask").width()
            }

            if(maskY<=0){
                maskY=0
            }else if(maskY>=$('.preview').height()-$(".mask").height()){
                maskY=$('.preview').height()-$(".mask").height()
            }
            $(".mask").css("left",maskX+"px").css("top",maskY+"px")
            // 大图片的移动距离=遮挡层移动距离*大图片最大移动距离/遮挡层的最大移动距离
            // 遮罩层最大移动的距离
            var maxLittleMove=$('.preview').width()-$(".mask").width()
            //大图片最大移动距离
            var maxBigMove=$('.big_img').width()-$(".big").width()
            $(".big_img").css("left",-maskX*maxBigMove/maxLittleMove+"px").css("top",-maskY*maxBigMove/maxLittleMove+"px")
        })
    })