(3)仿京东放大镜效果

最新推荐文章于 2023-03-17 16:08:15 发布

superfortunate

最新推荐文章于 2023-03-17 16:08:15 发布

阅读量818

点赞数 1

分类专栏： JavaScript知识点详细学习笔记文章标签： css3 css html

本文链接：https://blog.youkuaiyun.com/weixin_59598992/article/details/122644558

版权

本文介绍了如何创建一个仿京东的图片放大镜效果。通过使用CSS3，创建一个带有遮挡层的盒子，并在原图基础上放置一个更大的图片。当鼠标经过时，遮挡层和大图片显示，随着鼠标移动，遮挡层和大图片同步展示细节，提供直观的放大查看体验。

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

在原先需要放大的图片上准备一个有颜色的遮挡层背景的盒子，例如样式为

.mask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background: #FEDE4F;
    opacity: .5;//半透明
    border: 1px solid #ccc;
    cursor: move;
}

子绝父相，给原图片样式加上相对定位position: relative;

在原图片旁边准备一个放比原图更大图片（原图的放大版）的盒子

.big {
    display: none;
    position: absolute;
    left: 410px;
    top: 0;
    width: 500px;
    height: 500px;
    background-color: pink;
    z-index: 999;
    border: 1px solid #ccc;
    overflow: hidden;//超出盒子大小的图片隐藏
}

<div class="preview_img">
       <img src="upload/s3.png" alt="">
       <div class="mask"></div>
       <div class="big">
              <img src="upload/big.jpg" alt=""