项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能,
点击“查看协议” => 图片弹出显示,并且可以手动滑动预览,直接代码如下;
需要引入jQuery(或者Zepto)swiper.min.js + swiper.min.css
swiper.js下载地址:http://3.swiper.com.cn/download/index.html(实例代码使用的是swiper3)
HTML:
<div class="swiperShow">查看协议</a></div > <div class="motai swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide items"><img src="img/a.jpg" alt="" /></div> <div class="swiper-slide items"><img src="img/c.jpg" alt="" /></div> <div class="swiper-slide items"><img src="img/d.jpg" alt="" /></div> <div class="swiper-slide items"><img src="img/e.jpg" alt="" /></div> </div> <div class="swiper-pagination"></div> </div>
CSS:
*{ margin: 0; padding: 0; } .swiperShow{ font-size: 0.6rem; text-align: center; background-color: #00D3AF; height: 1.5rem; line-height: 1.5rem; color: #fff; } .motai { display: none; position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; z-index: 11; margin: auto; background-color: rgba(0, 0, 0, 0.7); } .items { width: 100% !important; height: 100% !important; } .motai img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100%;/*图片按原尺寸显示*/ max-height: 100%;/*图片按原尺寸显示*/ z-index: 99; } .swiper-pagination { display: inline-block; height: 0.2rem; top: 0.5rem; font-size: 0.7rem; color: #999; text-align: center; }
JS:
$('.swiperShow').click(function(){ $('.motai').fadeIn(); }); $('.motai').click(function(){ $(this).fadeOut(); }); var mySwiper = new Swiper('.swiper-container', { slidesPerView:1, //默认初始显示页面 observer:true,//启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper touchRatio:0.5,//触摸比例。触摸距离与slide滑动距离的比率。默认为1 pagination: ".swiper-pagination",//启动分页器 paginationType : 'fraction' //分页器类型 })