最近遇到一个需求，一个页面有几个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
