用原生js实现淘宝详情页图片放大镜效果

最新推荐文章于 2023-04-14 21:57:05 发布

Coffee_noSugar

最新推荐文章于 2023-04-14 21:57:05 发布

阅读量1.6w

点赞数 11

CC 4.0 BY-SA版权

文章标签： js 原生js 淘宝 html5 放大镜

本文链接：https://blog.csdn.net/Coffee_noSugar/article/details/79432341

本文介绍如何用原生JavaScript实现类似淘宝详情页的图片放大镜功能。详细讲解HTML和CSS布局，以及JavaScript事件处理和计算逻辑，确保在不同比例的图片上都能正常工作。

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

这个功能是我在模仿淘宝详情页的时候做出来的，最初版本对于非1:1比例的图片没有做处理，后续对程序进行了完善和逻辑上修改，形成了当前的程序。

废话不多说，直接进入正题了，先上个效果图

先放上这段功能的html代码

<div id="full-pic">
    <img src="img/full-pic-1.jpg" alt="">
    <span id="pic-span"></span>
    <div id="big-pic">
        <img src="img/big-full-pic-1.jpg" alt="">
    </div>
</div>

然后是这段html对应的css代码

#full-pic{
    position: relative;
    width: 400px;
    height: 400px;
    background:#eee;
}
#full-pic>img{
    display: block;
    height: 400px;
    margin:0 auto;
}
#pic-span{
    display: none;
    position: absolute;
    cursor: move;
    width: 200px;
    height: 200px;
    background: url(../img/pic-span.png);
    left: 0px;
    top: 0px;
    z-index: 1;
}
#big-pic{
    width: 400px;
    height: 400px;
    overflow: hidden;
    background: white;
    position: absolute;
    left: 410px;
    top: 0;
    display: block;
}
#big-pic>img{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
}

这里有一张图来解释整个html布局和css样式

下面这张图是页面的显示效果

滑动下面的小图片可以实现上面的样板图片的切换以及右边大图的切换，实现起来很简单，就不赘述了

然后就是原生js的代码了

var pic_div = document.getElementById('full-pic');//拿

最低0.47元/天解锁文章

200万优质内容无限畅学