简易图片放大功能（ios系统的坑 ihponeX ihpone6SP等较新款）

自己最近做了一个简易的评价图片放大功能。原理比较简单就是点击图片，然后这个评价所以图片放在先写好的用swiper插件做的框架里，做到放大图片并可以滑动查看功能（没有图片缩放能，放大尺寸固定），下面附上代码，之后再说问题

1.评论展示图片代码

 

<div class="s-con2-img-a">
    <img src="图片路径">
    <img src="图片路径">
</div>

 2.之后图片放大的div框架

<!-- 评价查看大图 -->
<div class="order-img-big"></div>
<div class="order-img-show swiper-container" id="swiper-container2">
    <div class="swiper-wrapper">
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</div>

 4.css代码

.s-con2-img-a img{
	float:left;
	width:2.3rem;
	height:2.3rem;
	border-radius: 5px;
	margin-right: 0.3rem;
}
/*放大图片*/
.order-img-big{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background:rgba(0,0,0,0.7);
    display:none;
}
.order-img-show{
    position: absolute;
    top:50%;
    left:0;
    width:100%;
    margin-top: -6rem;
    height:12rem;
    z-index:1001;
    background:#fff;
    display:none;
}
.order-img-show img{
    width:100%;
    height:100%;
}
.order-pj-more{
    cursor: pointer;
    height:54px;
    line-height: 54px;
    text-align: center;
    font-size: 16px;
    color:#2c3e50;
    border-bottom: 1px solid #e6e6ed;
}
.order-store-pj{
    font-size: 12px;
    color:#95a5a6;
    margin-top: 20px;
}
</style><style>
.s-con2-img-a img{
	float:left;
	width:2.3rem;
	height:2.3rem;
	border-radius: 5px;
	margin-right: 0.3rem;
}
/*放大图片*/
.order-img-big{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background:rgba(0,0,0,0.7);
    display:none;
}
.order-img-show{
    position: absolute;
    top:50%;
    left:0;
    width:100%;
    margin-top: -6rem;
    height:12rem;
    z-index:1001;
    background:#fff;
    display:none;
}
.order-img-show img{
    width:100%;
    height:100%;
}
.order-pj-more{
    cursor: pointer;
    height:54px;
    line-height: 54px;
    text-align: center;
    font-size: 16px;
    color:#2c3e50;
    border-bottom: 1px solid #e6e6ed;
}
.order-store-pj{
    font-size: 12px;
    color:#95a5a6;
    margin-top: 20px;
}

3.js代码 

$('.s-con2-img-a img').on('click',function(){
	$('.order-img-show').fadeIn(200);
    $('.order-img-big').fadeIn(200);
    $('.order-img-show .swiper-wrapper').empty();
    $(this).parent().find('img').each(function(index){
        var a = '<div class="swiper-slide"><img src="'+$(this).attr('src')+'" style="object-fit: cover; "></div>';
        $('.order-img-show .swiper-wrapper').append(a);
    })
    var mySwiper1 = new Swiper('#swiper-container2', {
        pagination : '.swiper-pagination',
        autoplayDisableOnInteraction : false,
        paginationClickable :true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
    })
    mySwiper1.slideTo(($(this).index()+1), 500, false);
})
$('.order-img-big').on('click',function(){
    $('.order-img-show').fadeOut(200);
    $('.order-img-big').fadeOut(200);
})

本来在没有修改之前点击事件使用$(document.body).on('click','.s-con2-img-a img',function(){}）

后来发现ios版本高一点的不兼容这个点击事件，用上面的方法就可以兼容，这是一点

还有一点就是如果把上面图片的点击方法改成：

$('.s-con2-img-a img').on('click',function(){ })

$(document.body).on('click','.s-con2-img-a img',function(){
    $('.order-img-show').fadeIn(200);
    $('.order-img-big').fadeIn(200);
    $('.order-img-show .swiper-wrapper').empty();
    $(this).parent().find('img').each(function(index){
        var a = '<div class="swiper-slide"><img src="'+$(this).attr('src')+'" style="object-fit: cover; "></div>';
        $('.order-img-show .swiper-wrapper').append(a);
    })
    var mySwiper1 = new Swiper('#swiper-container2', {
        pagination : '.swiper-pagination',
        autoplayDisableOnInteraction : false,
        paginationClickable :true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
    })
    mySwiper1.slideTo(($(this).index()+1), 500, false); 

})

就是红色的就是一开始错误写法，这个点击方法不兼容ios上文有说，但是叫一个蓝色的空的点击方法神奇的发现，可以兼容了，至今还未找出原因，有懂的可以留言，分享一样

就这么多了