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

PhotoSwipe插件能实现手机端点击图片全屏放大再双击图片放大等功能
PhotoSwipe插件官方网站 http://www.photoswipe.com/
但有一点不太好的是图片放大后再单击不能关闭浏览，要点击关闭按钮或者滑动才能关闭，找了好久配置项都没说到这点上的，只能自己动手改了。
打开photoswipe.js，大概在3179行有个关于tap的函数定义
在开头先定义一个变量
var tap_num = 0;
然后在onTapStart的定义里加入

//根据需求自己添加的S//判断是单击还是双击 单击关闭 双击放大tap_num++;if（tap_num < 2）{setTimeout（function（）{if（tap_num > 1）{tap_num = 0;return;}else{tap_num = 0;//判断是否有拖拽 如有拖拽触发拖拽事件 没有则关闭if（_isDragging）{return;}else{self.close（）;}}},200）;}//根据需求自己添加的E

大概整体就是这样

var tapTimer,tapReleasePoint = {},_dispatchTapEvent = function（origEvent, releasePoint, pointerType） {var e = document.createEvent（ "CustomEvent" ）,eDetail = {origEvent:origEvent, target:origEvent.target, releasePoint: releasePoint, pointerType:pointerType || "touch"};e.initCustomEvent（ "pswpTap", true, true, eDetail ）;origEvent.target.dispatchEvent（e）;};var tap_num = 0;_registerModule（"Tap", {publicMethods: {initTap: function（） {_listen（"firstTouchStart", self.onTapStart）;_listen（"touchRelease", self.onTapRelease）;_listen（"destroy", function（） {tapReleasePoint = {};tapTimer = null;}）;},onTapStart: function（touchList） {if（touchList.length > 1） {clearTimeout（tapTimer）;tapTimer = null;}//根据需求自己添加的S//判断是单击还是双击 单击关闭 双击放大tap_num++;if（tap_num < 2）{setTimeout（function（）{if（tap_num > 1）{tap_num = 0;return;}else{tap_num = 0;//判断是否有拖拽 如有拖拽触发拖拽事件 没有则关闭if（_isDragging）{return;}else{self.close（）;}}},200）;}//根据需求自己添加的E},onTapRelease: function（e, releasePoint） {if（！releasePoint） {return;}if（！_moved && ！_isMultitouch && ！_numAnimations） {var p0 = releasePoint;if（tapTimer） {clearTimeout（tapTimer）;tapTimer = null;// Check if taped on the same placeif （ _isNearbyPoints（p0, tapReleasePoint） ） {_shout（"doubleTap", p0）;return;}}if（releasePoint.type === "mouse"） {_dispatchTapEvent（e, releasePoint, "mouse"）;return;}var clickedTagName = e.target.tagName.toUpperCase（）;// avoid double tap delay on buttons and elements that have class pswp__single-tapif（clickedTagName === "BUTTON" || framework.hasClass（e.target, "pswp__single-tap"） ） {_dispatchTapEvent（e, releasePoint）;return;}_equalizePoints（tapReleasePoint, p0）;tapTimer = setTimeout（function（） {_dispatchTapEvent（e, releasePoint）;tapTimer = null;}, 300）;}}}}）;

把修改后的photoswipe.js压缩一下，就能实现自己想要的功能了
另外，使用photoswipe插件需要插入框架和JavaScript代码，可以把这些代码整合成一个js再引入，这样页面看起来就简洁了很多。
先在html写上图片相册结构，并配上样式

<div id="demo-test-gallery" class="demo-gallery"><a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024"><img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" /></a><a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024"><img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" /></a></div>

整理后的js

document.writeln（"<！-- Root element of PhotoSwipe. Must have class pswp. -->"）;document.writeln（"<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">"）;document.writeln（""）;document.writeln（"<！-- Background of PhotoSwipe."）;document.writeln（" It"s a separate element as animating opacity is faster than rgba（）. -->"）;document.writeln（"<div class="pswp__bg"></div>"）;document.writeln（""）;document.writeln（"<！-- Slides wrapper with overflow:hidden. -->"）;document.writeln（"<div class="pswp__scroll-wrap">"）;document.writeln（""）;document.writeln（"<！-- Container that holds slides."）;document.writeln（"PhotoSwipe keeps only 3 of them in the DOM to save memory."）;document.writeln（"Don"t modify these 3 pswp__item elements, data is added later on. -->"）;document.writeln（"<div class="pswp__container">"）;document.writeln（"<div class="pswp__item"></div>"）;document.writeln（"<div class="pswp__item"></div>"）;document.writeln（"<div class="pswp__item"></div>"）;document.writeln（"</div>"）;document.writeln（""）;document.writeln（"<！-- Default （PhotoSwipeUI_Default） interface on top of sliding area. Can be changed. -->"）;document.writeln（"<div class="pswp__ui pswp__ui--hidden">"）;document.writeln（""）;document.writeln（"<div class="pswp__top-bar">"）;document.writeln（""）;document.writeln（"<！-- Controls are self-explanatory. Order can be changed. -->"）;document.writeln（""）;document.writeln（"<div class="pswp__counter"></div>"）;document.writeln（""）;document.writeln（"<button class="pswp__button pswp__button--close" title="Close （Esc）"></button>"）;document.writeln（""）;document.writeln（"<button class="pswp__button pswp__button--share" title="Share"></button>"）;document.writeln（""）;document.writeln（"<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>"）;document.writeln（""）;document.writeln（"<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>"）;document.writeln（""）;document.writeln（"<！-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->"）;document.writeln（"<！-- element will get class pswp__preloader--active when preloader is running -->"）;document.writeln（"<div class="pswp__preloader">"）;document.writeln（"<div class="pswp__preloader__icn">"）;document.writeln（"<div class="pswp__preloader__cut">"）;document.writeln（"<div class="pswp__preloader__donut"></div>"）;document.writeln（"</div>"）;document.writeln（"</div>"）;document.writeln（"</div>"）;document.writeln（"</div>"）;document.writeln（""）;document.writeln（"<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">"）;document.writeln（"<div class="pswp__share-tooltip"></div>"）;document.writeln（"</div>"）;document.writeln（""）;document.writeln（"<button class="pswp__button pswp__button--arrow--left" title="Previous （arrow left）">"）;document.writeln（"</button>"）;document.writeln（""）;document.writeln（"<button class="pswp__button pswp__button--arrow--right" title="Next （arrow right）">"）;document.writeln（"</button>"）;document.writeln（""）;document.writeln（"<div class="pswp__caption">"）;document.writeln（"<div class="pswp__caption__center"></div>"）;document.writeln（"</div>"）;document.writeln（""）;document.writeln（"</div>"）;document.writeln（""）;document.writeln（"</div>"）;document.writeln（""）;document.writeln（"</div>"）;（function（） {var initPhotoSwipeFromDOM = function（gallerySelector） {var parseThumbnailElements = function（el） {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],el,childElements,thumbnailEl,size,item;for（var i = 0; i < numNodes; i++） {el = thumbElements[i];// include only element nodesif（el.nodeType ！== 1） {continue;}childElements = el.children;size = el.getAttribute（"data-size"）.split（"x"）;// create slide objectitem = {src: el.getAttribute（"href"）,w: parseInt（size[0], 10）,h: parseInt（size[1], 10）,author: el.getAttribute（"data-author"）};item.el = el; // save link to element for getThumbBoundsFnif（childElements.length > 0） {item.msrc = childElements[0].getAttribute（"src"）; // thumbnail urlif（childElements.length > 1） {item.title = childElements[1].innerHTML; // caption （contents of figure）}}var mediumSrc = el.getAttribute（"data-med"）;if（mediumSrc） {size = el.getAttribute（"data-med-size"）.split（"x"）;// "medium-sized" imageitem.m = {src: mediumSrc,w: parseInt（size[0], 10）,h: parseInt（size[1], 10）};}// original imageitem.o = {src: item.src,w: item.w,h: item.h};items.push（item）;}return items;};// find nearest parent elementvar closest = function closest（el, fn） {return el && （ fn（el） ? el : closest（el.parentNode, fn） ）;};var onThumbnailsClick = function（e） {e = e || window.event;e.preventDefault ? e.preventDefault（） : e.returnValue = false;var eTarget = e.target || e.srcElement;var clickedListItem = closest（eTarget, function（el） {return el.tagName === "A";}）;if（！clickedListItem） {return;}var clickedGallery = clickedListItem.parentNode;var childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for （var i = 0; i < numChildNodes; i++） {if（childNodes[i].nodeType ！== 1） {continue;}if（childNodes[i] === clickedListItem） {index = nodeIndex;break;}nodeIndex++;}if（index >= 0） {openPhotoSwipe（ index, clickedGallery ）;}return false;};var photoswipeParseHash = function（） {var hash = window.location.hash.substring（1）,params = {};if（hash.length < 5） { // pid=1return params;}var vars = hash.split（"&"）;for （var i = 0; i < vars.length; i++） {if（！vars[i]） {continue;}var pair = vars[i].split（"="）;if（pair.length < 2） {continue;}params[pair[0]] = pair[1];}if（params.gid） {params.gid = parseInt（params.gid, 10）;}return params;};var openPhotoSwipe = function（index, galleryElement, disableAnimation, fromURL） {var pswpElement = document.querySelectorAll（".pswp"）[0],gallery,options,items;items = parseThumbnailElements（galleryElement）;// define options （if needed）options = {galleryUID: galleryElement.getAttribute（"data-pswp-uid"）,getThumbBoundsFn: function（index） {// See Options->getThumbBoundsFn section of docs for more infovar thumbnail = items[index].el.children[0],pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect（）;return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};},addCaptionHTMLFn: function（item, captionEl, isFake） {if（！item.title） {captionEl.children[0].innerText = "";return false;}captionEl.children[0].innerHTML = item.title + "<br/><small>Photo: " + item.author + "</small>";return true;}};// options for control baroptions.shareEl = false;options.fullscreenEl = false;if（fromURL） {if（options.galleryPIDs） {// parse real index when custom PIDs are used// http://photoswipe.com/documentation/faq.html#custom-pid-in-urlfor（var j = 0; j < items.length; j++） {if（items[j].pid == index） {options.index = j;break;}}} else {options.index = parseInt（index, 10） - 1;}} else {options.index = parseInt（index, 10）;}// exit if index not foundif（ isNaN（options.index） ） {return;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe（ pswpElement, PhotoSwipeUI_Default, items, options）;// see: http://photoswipe.com/documentation/responsive-images.htmlvar realViewportWidth,useLargeImages = false,firstResize = true,imageSrcWillChange;gallery.listen（"beforeResize", function（） {var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;dpiRatio = Math.min（dpiRatio, 2.5）;realViewportWidth = gallery.viewportSize.x * dpiRatio;if（realViewportWidth >= 1200 || （！gallery.likelyTouchDevice && realViewportWidth > 800） || screen.width > 1200 ） {if（！useLargeImages） {useLargeImages = true;imageSrcWillChange = true;}} else {if（useLargeImages） {useLargeImages = false;imageSrcWillChange = true;}}if（imageSrcWillChange && ！firstResize） {gallery.invalidateCurrItems（）;}if（firstResize） {firstResize = false;}imageSrcWillChange = false;}）;gallery.listen（"gettingData", function（index, item） {if（ useLargeImages ） {item.src = item.o.src;item.w = item.o.w;item.h = item.o.h;} else {item.src = item.m.src;item.w = item.m.w;item.h = item.m.h;}}）;gallery.init（）;};// select all gallery elementsvar galleryElements = document.querySelectorAll（ gallerySelector ）;for（var i = 0, l = galleryElements.length; i < l; i++） {galleryElements[i].setAttribute（"data-pswp-uid", i+1）;galleryElements[i].onclick = onThumbnailsClick;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash（）;if（hashData.pid && hashData.gid） {openPhotoSwipe（ hashData.pid, galleryElements[ hashData.gid - 1 ], true, true ）;}};initPhotoSwipeFromDOM（".demo-gallery"）;}）（）;

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