移动端实现图片点击滑动预览，手势拖动，放大缩小功能

移动端页面想实现图片点击可以自由滑动，放大缩小功能如下图所示

实现效果如下

    

 

代码如下：

1.首先要引入swiper插件的js,css

2.HTML代码如下，先建立一个空的div层

<div class='txtcont'>     <img src="https://www.codelovers.cn/uploads/20190110/1547110586940653.png">     <img src="https://www.codelovers.cn/static/Home/images/404.jpg"> </div> <div class="imgshow">     <div class="swiper-container swiperbox">         <div class="swiper-wrapper"> </div></div>     <div class="closebtn"></div> </div>

3.css代码如下

.imgshow{display: none;background: rgba(0, 0, 0, .5);position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 2019521;} .swiperbox{height: 100vh;z-index: 3;background: #000;} .swiperbox img{width: initial;position: relative;z-index: 2;} .swiper-zoom-container:before{width: 100%;height: 100%;content: ' ';position: absolute;z-index: 1;display: block;top: 0;left: 0;cursor: pointer;} .closebtn{position: absolute;z-index: 22;background: url(../images/newclose.png) no-repeat 11px 0px;width: 60px;height: 60px;bottom: 0;left: 10px;background-size: 40px;}

4.js代码如下

$('.txtcont img').each(function () {     $(this).attr('data-imgsrc', $(this).index('.txtcont img'))     var url = $(this).attr('src')     $('.imgshow .swiper-wrapper').append('<div class="swiper-slide"> <div class="swiper-zoom-container"><img src="'+url+'"></div></div>') }) $('.txtcont img').click(function () {     var index = $(this).attr('data-imgsrc');     $('.imgshow').fadeIn();     var mySwiper = new Swiper('.swiperbox', {         zoom: {             toggle: false,         },     })     mySwiper.update();     if (index != 0) {         mySwiper.slideTo(index, 0, true);     } else {         $('.swiperbox .swiper-wrapper').css({ 'transform': 'translate3d(0, 0px, 0px)' })     } }) $('.closebtn').on('click',function(){     $('.imgshow').fadeOut(); })

原文地址：https://www.codelovers.cn/article/20190522103251.html