JQuery放大镜效果实现实例

最新推荐文章于 2025-06-20 14:12:47 发布

原创

最新推荐文章于 2025-06-20 14:12:47 发布 · 9.6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#新手

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果演示：

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

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;