H5 查看大图。缩放图片

之前前前后后找了很多类似的JS库，都非常的优秀，比如 viewerjs 或者其他。

然而这些JS库都太厉害了。封装的功能也是太多了，最重要的是这个库放大的图片。
并不能满屏，只能以实际上传的图片大小来显示

最后还是用了swiper。最后实现的效果：

可以通过双击放大图片
在移动端可以通过手指缩放放大/缩小图片

附上简单的源代码，写的比较简陋，仅供参考，可以稍作修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>


  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

  <style>
    #origin-img {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
    }

    #origin-img .swiper-slide img {
      width: 100%;
      vertical-align: middle;
    }

    .swiper-pagination {
      top: 1em;
      bottom: auto;
      color: #fff;
    }

    .upload {
      position: absolute;
      bottom: 0;
      line-height: 3em;
      background: rgba(0, 0, 0, .5);
      z-index: 5;
      color: #fff;
      text-indent: 1em;
      width: 100%;
    }
  </style>
</head>

<body>

  <div class="thumb" thumblist="list1">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_1.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_1.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_2.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_2.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_3.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_3.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s1_4.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s1_4.jpg">
  </div>

  <div class="thumb" thumblist="list2">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg">
  </div>

  <div class="thumb" thumblist="list3">
    <img src="https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg" tppabs="https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg">
  </div>

  <!-- Swiper -->
  <div class="swiper-container" id="origin-img">
    <div class="swiper-wrapper"></div>
    <div class="swiper-pagination"></div>
    <div class="upload">图片描述</div>
  </div>


  <script>
    imgsdata = {
      "list1": ["https://www.swiper.com.cn/demo/meituan1/uploads/s1_1.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_2.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_3.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_4.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_5.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_6.jpg" /*tpa=*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_7.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s1_7.jpg*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_8.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s1_8.jpg*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s1_9.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s1_9.jpg*/
      ],
      "list2": ["https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s2_1.jpg*/ ,
        "https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s2_2.jpg*/
      ],
      "list3": ["https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg" /*tpa=https://www.swiper.com.cn/demo/meituan1/uploads/s3_1.jpg*/ ],
    }

    var swiper = new Swiper('.swiper-container', {
      zoom: true,
      width: window.innerWidth,
      virtual: true,
      spaceBetween: 20,
      pagination: {
        el: '.swiper-pagination',
        type: 'fraction',
      },
      on: {
        click: function () {
          $('#origin-img').fadeOut('fast');
          this.virtual.slides.length = 0;
          this.virtual.cache = [];
          swiperStatus = false;

        },
      },

    });

    $('.thumb img').click(function () {
      clickIndex = $(this).index();

      imglist = $(this).parent().attr('thumblist');
      imgs = imgsdata[imglist];
      for (i = 0; i < imgs.length; i++) {
        swiper.virtual.appendSlide('<div class="swiper-zoom-container"><img src="' + imgs[i] + '" /></div>');
      }
      swiper.slideTo(clickIndex);
      $('#origin-img').fadeIn('fast');
      swiperStatus = true;

    })

    //切换图状态禁止页面缩放	
    document.addEventListener('touchstart', function (event) {
      if (event.touches.length > 1 && swiperStatus) {
        event.preventDefault();
      }
    })
    var lastTouchEnd = 0;
    document.addEventListener('touchend', function (event) {
      var now = (new Date()).getTime();
      if (now - lastTouchEnd <= 300) {
        event.preventDefault();
      }
      lastTouchEnd = now;
    }, false)

    document.addEventListener('touchmove', function (e) {
      if (swiperStatus) {
        e.preventDefault();
      }
    })
  </script>
</body>

</html>

源代码参考：https://www.swiper.com.cn/demo/meituan1/
资源直接引用了cdn的资源，用的swiper版本是4.0.2 可以把swiper下载下来在使用。

Jioho_

发布了71 篇原创文章 · 获赞 58 · 访问量 17万+

私信关注

H5 查看大图。缩放图片

猜你喜欢