DIV CSS 佈局教程網

PhotoSwipe插件能實現手機端點擊圖片全屏放大 再雙擊圖片放大等功能

PhotoSwipe插件官方網站 http://www.photoswipe.com/

photoswipe之移動端圖片放大查看，滑動切換下一張，圖片保存到本地。

<style>
.pnav{margin-top:30px;text-align:center;line-height:24px; font-size:16px}
.pnav a{padding:4px}
.pnav a.cur{background:#007bc4;color:#fff;}
.demo{width:80%; margin:10px auto}

/*必要樣式*/
#photos{width:150px; border:1px solid #d3d3d3;margin:20px auto; text-align:center;padding:4px;cursor:pointer;position:relative}
#photos p{position:absolute; bottom:0;left:0;padding:4px;background:#000;color:#fff}
.my-gallery {
 width: 100%;
 float: left;
}
.my-gallery img {
 width: 100%;
 height: auto;
}
.my-gallery figure {
 display: block;
 float: left;
 margin: 0 5px 5px 0;
 width: 150px;
}
.my-gallery figcaption {
 display: none;
}
</style>

js代碼：

<script type="text/javascript">
var openPhotoSwipe = function() {
 var pswpElement = document.querySelectorAll('.pswp')[0];

 var items = [
  {
   src: 'images/s1.jpg',
   w: 800,
   h: 1142
  },
  {
   src: 'images/s2.jpg',
   w: 800,
   h: 1142
  },
 {
   src: 'images/s3.jpg',
   w: 800,
   h: 1142
  },
 {
   src: 'images/s4.jpg',
   w: 800,
   h: 1142
  },
 {
   src: 'images/s5.jpg',
   w: 800,
   h: 1142
  }
 ];
 
 var options = {
  history: false,
  focus: false,

  showAnimationDuration: 0,
  hideAnimationDuration: 0
  
 };
 
 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
 gallery.init();
};

document.getElementById('photos').onclick = openPhotoSwipe;
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。