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

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

移动端实现图片点击滑动预览,手势拖动,放大缩小功能_第1张图片

实现效果如下

移动端实现图片点击滑动预览,手势拖动,放大缩小功能_第2张图片    移动端实现图片点击滑动预览,手势拖动,放大缩小功能_第3张图片

 

代码如下:

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

2.HTML代码如下,先建立一个空的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(' 
') }) $('.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 

你可能感兴趣的:(jquery,javascript)