移动端点击图片放大特效PhotoSwipe.js插件实现

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。