点击swiper里的图，预览放大效果

暖暖胖胖

已于 2023-03-04 16:03:35 修改

阅读量1.2k

点赞数

分类专栏：前端文章标签： css html css3

于 2023-03-04 15:52:17 首次发布

本文链接：https://blog.csdn.net/nuanpang/article/details/129335419

版权

点击swiper里的图，预览放大效果

摘要由CSDN通过智能技术生成

最近遇到一个需求，一个页面有几个swiper，要求点击每个swiper里的图，被点击的图会放大呈现预览效果。如图：

代码放上：

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no minimal-ui">
<meta charset="UTF-8">
<title>Document</title>
<link href=" https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/swiper.min.css"> -->
<style>
.showBigImg {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  z-index: 999;
}
.showBigImg .closeBigImg {
  position: absolute;
  right: 35px;
  top: 35px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  text-align: center;
  line-height: 45px;
  font-size: 45px;
  color: #fff;
  z-index: 9999;
  user-select: none;
}
.showBigImg .showBigImgWrap {
  position: relative;
  width: 30%;
  height: 100%;
  overflow: hidden;
}
.showBigImg .showBigImgWrap .allImgBox {
  position: relative;
  width: 100%;
  height: 100%;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte {
  float: left;
  width: 100%;
  height: 100%;
  text-align: center;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte span {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.showBigImg .showBigImgWrap .allImgBox .imgIte img {
  max-width: 90%;
  max-height: 90%;
  vertical-align: middle;
}
.small-img img{
  width: 150px;
}



.swiper-slide {
    text-align: center;
    font-size: 18px;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
    width: 100%;
}
.showBigImgWrap img {
    width: auto;
}
</style