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

最新推荐文章于 2024-12-12 18:38:51 发布

编程爱好者之家

最新推荐文章于 2024-12-12 18:38:51 发布

阅读量6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery javascript

本文链接：https://blog.youkuaiyun.com/tangjuntangjun/article/details/90439188

jquery 同时被 2 个专栏收录

9 篇文章

订阅专栏

javascript

9 篇文章

订阅专栏

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

实现效果如下

代码如下：

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