2022-02-09 工作记录--CSS-用CSS实现鼠标滑动时图片的显示与隐藏

最新推荐文章于 2023-09-25 10:50:07 发布

小呀小萝卜儿

最新推荐文章于 2023-09-25 10:50:07 发布

阅读量1.1k

点赞数 4

分类专栏：工作文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_48850734/article/details/122836370

版权

工作专栏收录该内容

119 篇文章 7 订阅

订阅专栏

用`CSS`实现鼠标滑动时图片的显示与隐藏

一、效果

在这里插入图片描述

二、思维分析

通过 overflow:auto; + 隐藏滚动条 实现的。

图片前面会有一个空白盒子，这样一来就让视觉上产生一来没有图片的效果，当鼠标向左滑动时，空白div后面的那些图片就相应展示出来啦。

三、对应代码

HTML

<!-- 滑动查看更多 那个黄色盒子 -->
<div class="seeMore">
   <img src="/static/web/image/sollbox.jpg" alt="">
</div>

<!-- overflow:auto;+隐藏滚动条实现 图片由无到有的滑动效果 -->
<div class="teachers_imgs">
   <div class="t_imgs">
   	<!-- 空白盒子 -->
     <div class="t_img empty_box"></div>
     <!-- 第一张图片 -->
     <div class="t_img">
      	<img src="http://swt-app.oss-cn-chengdu.aliyuncs.com/images/20210917/5733151631844610.png" alt="">
     </div>
     <!-- 第二张图片 -->
     <div class="t_img">
          <img src="http://swt-app.oss-cn-chengdu.aliyuncs.com/images/20210917/3795971631844618.png" alt="">
     </div>
   </div>
</div>

CSS

/* less写法 */
.seeMore {
  position: absolute;
  right: 0;
  bottom: 2.3rem;
  width: 12%;
  height: (190rem / @fontSize1)*2;
}
.seeMore img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teachers_imgs {
  position: absolute;
  left: 0;
  bottom: 2.3rem;
  width: 100%;
  height: (190rem / @fontSize1)*2;
  .t_imgs {
    height: 100%;
    overflow-x: auto;
    display: flex;
    /* 隐藏滚动条 */
    &::-webkit-scrollbar {
      display: none;
    }
    .t_img {
      margin-right: 0.32rem;
      height: 100%;
      flex-shrink: 0;
      width: calc(50vw - 0.16rem);
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    /* 空白盒子 */
    .empty_box {
      width: 100vw;
    }
  }
}