JQuery放大镜效果实现实例

最新推荐文章于 2022-07-29 11:52:32 发布

原创最新推荐文章于 2022-07-29 11:52:32 发布 · 9.6k 阅读

15 ·

本内容遵循CC 4.0 BY-SA版权协议

本文通过实例演示了如何使用JQuery创建放大镜效果。当鼠标移入缩略图时，小盒子跟随鼠标移动，同时右侧大图显示放大效果。实现过程中，涉及HTML布局、CSS样式设置以及JQuery事件监听和元素位置调整。

实现效果演示：

鼠标移入左侧缩略图时，小盒子和右边大图显示，并且小盒子跟随鼠标移动，右侧大图出现放大效果。
在这里插入图片描述
实现步骤：

HTML部分：
要实现放大镜效果，只需要一个简单的布局，左右各一个盒子，左侧放缩略图，里面包着小盒子（放大镜），右侧放大图，用于制造放大效果。

<body>
    <div id="box">
        <div id="lbox">
            <img src="images/1.jpg" alt="" id="tp1">
            <div id="xbox"></div>
        </div>
        <div id="rbox">
            <img src="images/2.jpg" alt="" id="tp2">
        </div>
    </div>
</body>

CSS部分：
放大镜效果样式重点：左侧小盒子和右侧大盒子要默认隐藏，并且都要加上position属性，方便之后做移动效果。

*{
    margin:0;
    padding: 0;
}
    #lbox{

        float: left;
        width:400px;
        height:400px;
        border:1px solid;

    }
    #tp1{
        position:absolute;
        top:20;
        left: 0;
        width:400px;
        height:400px;

    }
    #xbox{
        background:#fff;
        width:200px;
        height: 200px;
        position:absolute;
        opacity:0.3;
        display: none;
    }
    #rbox{
        width: 500px;
        height: 500px;
        border:1px solid;
        overflow:hidden;
        float: left;
        display: none;
        position:relative;
    }
    #tp2{
        width: 900px;
        height: 900px;
        position:absolute;
    }

JQ部分：
首先通过hover实现第一个效果：让小盒子和外面的大盒子显示/隐藏

 $(lbox).hover(function() {                         //给左边大盒子加hover
        $(xbox).show()                          //这里是移入事件，控制两个盒子显示
        $(rbox).show()
    }, function() {
        $(xbox).hide()                          //这里是移出事件，控制两个盒子隐藏
        $(rbox).hide()
    });

之后开始写主要功能：小盒子跟随鼠标移动，并且鼠标位置固定在中间，右边大图出现放大效果

 $(lbox).mousemove(function(e){            //首先要给左边大盒子加鼠标移动事件，这样才能一直触发事件，更新盒子位置
        var e=e||event;                    //声明event，用于获取鼠标位置
        var x=e.clientX-$(lbox).offset().left-$(xbox).width()/2;    //这里x=鼠标位置减去左边大盒子距离网页边框的距离，这一步获得了鼠标相对于盒子内部的位置，之后再减去小盒子的宽/2，就获得了盒子正中间的位置。之后把这个值赋给x
        var y=e.clientY-$(lbox).offset().top-$(xbox).height()/2;    //这个是鼠标的纵轴，原理同上
        var maxx=$(lbox).width()-$(xbox).width();       //这里声明了一个最大宽度，用于限制小盒子的右边移动范围，利用大盒子的总宽度减去小盒子的总宽度，剩下的就是小盒子的移动范围，这个好理解。
        var maxy=$(lbox).height()-$(xbox).height(); //小盒子纵轴移动范围 原理同上
        //这里开始四个if分别用来限制盒子的左上下右的最大移动范围，不能让小盒子超出大盒子
        if(x<0){
            x=0
        }
        if(y<0){
            y=0
        }
        if(x>maxx){
            x=maxx;
        }
        if(y>maxy){
            y=maxy
        }
        //最后将值通过css方法写入进去
        //这里要注意，不能用attr({top:y,left:x}),因为attr写入的属性是写到元素行内的，尽管css里提前写好了position样式，但行内的top和left还是无法和css里的定位属性进行关联。
        $(xbox).css({top:y,left:x})
        $(tp2).css({top:-y*2,left:-x*2})    //这里是右边图片的移动属性，xy轴分别向反方向移动，做出跟随镜头的效果，乘二是因为右边大图比左边小图大一倍。

    });

注意：最后添加样式时，不能用attr({top:y,left:x}) ，原因请看注释。

到这里，一个放大镜功能就实现了，欢迎大家指出错误，笔芯。

标签

#新手