头像

jQuery+swiper仿微信朋友圈图片放大查看预览代码

来源:https://www.sucaihuo.com/js/3849 18***38 2018-08-04 11:29浏览(2625) 收藏

jQuery+swiper仿微信朋友圈图片放大查看预览代码,手机网页点击小图放大查看大图代码。
jQuery+swiper仿微信朋友圈图片放大查看预览代码
分类:图片代码 > 缩略图 难易:初级

程序员,你不是一个人;网站开发QQ群:642228541,在线充值,或联系QQ321037704直接充值

查看演示 下载资源: 68

手机扫码访问:

下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script>
$(document).ready(function(){
  /*调起大图 S*/
   var mySwiper = new Swiper('.swiper-container2', {
        loop: false,
        pagination: '.swiper-pagination2',
        })
    $("#list").on("click", ".post img", 
    function() {
        var imgBox = $(this).parents(".post").find("img");
        var i = $(imgBox).index(this);
        $(".big_img .swiper-wrapper").html("")

        for(var j = 0 ,c = imgBox.length; j < c ;j++){
         $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
        }
        mySwiper.updateSlidesSize();
        mySwiper.updatePagination();
        $(".big_img").css({
            "z-index": 1001,
            "opacity": "1"
        });
        mySwiper.slideTo(i, 0, false);
        return false;
    });
  
    $(".big_img").on("click", 
    function() {
        $(this).css({
            "z-index": "-1",
            "opacity": "0"
        });

    });
  });
  /*调起大图 E*/
</script>
最新交易
评论3
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 525945990

  • 头像 板凳
    08-07 13:20
    ga***41
    这个效果很赞哦 感谢分享
  • 头像 椅子
    08-06 07:48
    不***火
    非常不错的功能
  • 头像 沙发
    08-05 10:03
    舒***畅
    这个功能很棒很实用,赞一个!
1 2