原生JS实现图片放大镜效果

最新推荐文章于 2025-05-16 11:33:43 发布

＿uyang

最新推荐文章于 2025-05-16 11:33:43 发布

阅读量433

点赞数 8

本文链接：https://blog.youkuaiyun.com/qq_53593492/article/details/136230551

版权

本文详细介绍了如何使用HTML、CSS和JavaScript实现一个图片缩放功能，包括原图显示、放大镜效果以及滑块的移动控制。代码示例展示了如何监听鼠标事件以调整放大镜的位置和图片的显示比例。

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

效果图：

代码实现：

HTML.

<!-- 原图盒子 -->
        <div class="small-box">
            <!-- 放大镜-->
            <div class="float-box"> <!-- 蒙层 --></div>
                <img src="PICTURE/d.jpg" class="small-img">
            <!-- 大图显示-->
            <div class="big-box">
                <img class="big-img" src="PICTURE/d.jpg">
            </div>
        </div>

CSS.

/*原图盒子*/
 .small-box {
        position: relative;  /*原图盒子相对定位（其他都绝对）*/
        width:400px;
        height:400px;
    }
 /*原图*/
       .small-img {
        width: 100%;
        height: 100%;
    }
/*滑块*/
    .floa