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

photoswipe 插件能实现手机端点击图片全屏放大再双击图片放大等功能

但有一点不太好的是图片放大后再单击不能关闭浏览，要点击关闭按钮或者滑动才能关闭，找了好久配置项都没说到这点上的，只能自己动手改了。

打开photoswipe.js，大概在3179行有个关于tap的函数定义在开头先定义一个变量

然后在onTapStart的定义里加入

1){ tap_num = 0; return; }else{ tap_num = 0; //判断是否有拖拽如有拖拽触发拖拽事件没有则关闭 if(_isDragging){ return; }else{ self.close(); } } },200); } //根据需求自己添加的E

大概整体就是这样

e.initCustomEvent( 'pswpTap',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 place
 if ( _isNearbyPoints(p0,tapReleasePoint) ) {
  _shout('doubleTap',p0);
  return;
 }
}

if(releasePoint.type === 'mouse') {
 _dispatchTapEvent(e,'mouse');
 return;
}

var clickedTagName = e.target.tagName.toUpperCase();
// avoid double tap delay on buttons and elements that have class pswp__single-tap
if(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写上图片相册结构，并配上样式

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

相关文章