web API—一天一个小案例——仿京东商品图放大镜效果

原创

已于 2022-09-21 10:09:23 修改 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

于 2022-09-19 21:33:06 首次发布

本文介绍了如何使用HTML、CSS和JavaScript实现一个前端开发小案例，即仿照京东商品图的放大镜效果。通过设置HTML结构和CSS样式，然后利用JavaScript监听鼠标事件，动态调整遮盖层和放大图片的位置，实现放大镜效果。关键点包括遮盖层的显示、跟随鼠标移动以及大图等比例显示。

1、先准备好html和css样式案例效果图如下

html和css样式

用定位才能设置left值

<style>
    .preview_img {
    position: relative;  
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
    margin-bottom: 30px;
}
.mask {
    position: absolute;
    display: none;
    top: 0;
    width: 300px;
    height: 300px;
    cursor: move;
    background-color: orange;
    opacity: 0.3;
    border: 1px solid #ccc;
}
.big {
    position: absolute;
    display: none;
    top: 0;
    left: 420px;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    overflow: hidden;
}
//设置大图片定位才能设置偏移量
.big img {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
<div class="preview_img">
    <img src="uploads/s3.png" alt="" />
    //遮盖层
    <div class="mask"&