基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx
《基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx》由会员分享，可在线阅读，更多相关《基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1.docx（11页珍藏版）》请在冰豆网上搜索。
基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解1
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
这篇文章主要介绍了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js的源码和使用方法，并附上一个使用ImageView.js的实例，这里分享给大家，有需要的小伙伴参考下。
调用方式:
ImageView（index,imgData）--index参数为图片默认显示的索引值，类型为Number--imaData参数为图片url数组，类型为Array
使用之前要先引入zepto.js文件
ImageView.js具体代码如下：
代码如下:
/*
*ImageViewv1.0.0
*--基于zepto.js的大图查看
*--调用方法ImageView（index,imgDada）
*--index图片默认值显示索引,Number--imgData图片url数组,Array
**/
varImageView=（function（window,$）{
var_this=$（"#slideView"）,_ImgData=[],_index=0,_length=0,
_start=[],_org=[],_orgTime=null,
_lastTapDate=null,
_zoom=1,_zoomXY=[0,0],_transX=null,
_advancedSupport=false,
_doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom=false,
isSlide=true,isDrag=false,timer=null,
winW=window.innerWidth,winH=window.innerHeight;
/**
*事件对象event
*/
varEvent={
touchstart:
function（e）{
e.preventDefault;
if（_advancedSupport&&e.touches&&e.touches.length>=2）{
varimg=getImg;
$（img）.css（{"-webkit-transitionDuration":
"0ms","transitionDuration":
"0ms"}）;
_doubleZoomOrg=_zoom;
_doubleDistOrg=getDist（e.touches[0].pageX,e.touches[0].pageY,e.touches[1].pageX,e.touches[1].pageY）;
isDoubleZoom=true;
return
}
e=e.touches?
e.touches[0]:
e;
isDoubleZoom=false;
_start=[e.pageX,e.pageY];
_org=[e.pageX,e.pageY];
_orgTime=Date.now;
_transX=-_index*winW;
if（_zoom!
=1）{
_zoomXY=_zoomXY||[0,0];
_orgZoomXY=[_zoomXY[0],_zoomXY[1]];
varimg=getImg;
img&&（$（img）.css（{"-webkit-transitionDuration":
"0ms","transitionDuration":
"0ms"}））;
isDrag=true
}else{
_this.find（".pv-inner"）.css（{"-webkit-transitionDuration":
"0ms","transitionDuration":
"0ms"}）;
isSlide=true
}
},
touchmove:
function（e）{
e.preventDefault;
if（_advancedSupport&&e.touches&&e.touches.length>=2）{
varnewDist=getDist（e.touches[0].pageX,e.touches[0].pageY,e.touches[1].pageX,e.touches[1].pageY）;
_zoom=（newDist/_doubleDistOrg）*_doubleZoomOrg
varimg=getImg;
$（img）.css（{"-webkit-transitionDuration":
"0ms","transitionDuration":
"0ms"}）;
if（_zoom _zoom=1;
_zoomXY=[0,0];
$（img）.css（{"-webkit-transitionDuration":
"200ms","transitionDuration":
"200ms"}）
}elseif（_zoom>getScale（img）*2）{
_zoom=getScale（img）*2;
}
$（img）.css（{"-webkit-transform":
"scale（"+_zoom+"）translate（"+_zoomXY[0]+"px,"+_zoomXY[1]+"px）","transform":
"scale（"+_zoom+"）translate（"+_zoomXY[0]+"px,"+_zoomXY[1]+"px）"}）;
return
}
if（isDoubleZoom）{
return;
}
e=e.touches?
e.touches[0]:
e;
if（_zoom!
=1）{
vardeltaX=（e.pageX-_start[0]）/_zoom;
vardeltaY=（e.pageY-_start[1]）/_zoom;
_start=[e.pageX,e.pageY];
varimg=getImg;
varnewWidth=img.clientWidth*_zoom,
newHeight=img.clientHeight*_zoom;
varborderX=（newWidth-winW）/2/_zoom,
borderY=（newHeight-winH）/2/_zoom;
（borderX>=0）&&（_zoomXY[0]borderX）&&（deltaX/=3）;
（borderY>0）&&（_zoomXY[1]borderY）&&（deltaY/=3）;
_zoomXY[0]+=deltaX;
_zoomXY[1]+=deltaY;
（_length==1&&newWidth （_length==1&&newHeight $（img）.css（{"-webkit-transform":
"scale（"+_zoom+"）translate（"+_zoomXY[0]+
"px,"+_zoomXY[1]+"px）","transform":
"scale（"+_zoom+"）translate（"+_zoomXY[0]+
"px,"+_zoomXY[1]+"px）"}）
}else{
if（!
isSlide）return;
vardeltaX=e.pageX-_start[0];
（_transX>0||_transX _transX=-_index*winW+deltaX;
_this.find（".pv-inner"）.css（{"-webkit-transform":
"translate（"+_transX+"px,0px）translateZ（0）"}）;
}
},
touchend:
function（e）{
if（isDoubleZoom）{
return;
}
if（_zoom!
=1）{
if（!
isDrag）{return;}
varimg=getImg;
varnewWidth=img.clientWidth*_zoom,
newHeight=img.clientHeight*_zoom;
varborderX=（newWidth-winW）/2/_zoom,
borderY=（newHeight-winH）/2/_zoom;
if（_length>1&&borderX>=0）{
varupdateDelta=0;
varswitchDelta=winW/6;
if（_zoomXY[0] updateDelta=1;
}elseif（_zoomXY[0]>borderX+switchDelta/_zoom&&_index>0）{
updateDelta=-1;
}
if（updateDelta!
=0）{
scaleDown（img）;
changeIndex（_index+updateDelta）;
return
}
}
vardelta=Date.now-_orgTime;
if（delta （delta vardeltaDis=Math.pow（180/delta,2）;
_zoomXY[0]+=（_zoomXY[0]-_orgZoomXY[0]）*deltaDis;
_zoomXY[1]+=（_zoomXY[1]-_orgZoomXY[1]）*deltaDis;
$（img）.css（{"-webkit-transition":
"400mscubic-bezier（0.08,0.65,0.79,1）","transition":
"400mscubic-bezier（0.08,0.65,0.79,1）"}）
}else{
$（img）.css（{"-webkit-transition":
"200mslinear","transition":
"200mslinear"}）;
}
if（borderX>=0）{
if（_zoomXY[0] _zoomXY[0]=-borderX;
}elseif（_zoomXY[0]>borderX）{
_zoomXY[0]=borderX;
}
}
if（borderY>0）{
if（_zoomXY[1] _zoomXY[1]=-borderY;
}elseif（_zoomXY[1]>borderY）{
_zoomXY[1]=borderY;
}
}
if（Math.abs（_zoomXY[0]） $（img）.css（{"-webkit-transform":
"scale（"+_zoom+"）translate（0px,"+_zoomXY[1]+"px）","transform":
"scale（"+_zoom+"）translate（0px,"+_zoomXY[1]+"px）"}）;
return
}else{
$（img）.css（{"-webkit-transform":
"scale（"+_zoom+"）translate（"+_zoomXY[0]+"px,"+_zoomXY[1]+"px）","transform":
"scale（"+_zoom+"）translate（"+_zoomXY[0]+"px,"+_zoomXY[1]+"px）"}）;
}
isDrag=false
}else{
if（!
isSlide）{return;}
vardeltaX=_transX--_index*winW;
varupdateDelta=0;
if（deltaX>50）{
updateDelta=-1;
}elseif（deltaX updateDelta=1;
}
_index=_index+updateDelta;
changeIndex（_index）;
isSlide=false
}
},
click:
function（e）{
_zoom=1;
_zoomXY=[0,0];
_this.css（"opacity","0"）;
timer=setTimeout（function{
_this.css（{"display":
""}）.html（""）;
unbind;
},150）
},
dobelTap:
function（e）{
clearTimeout（timer）;
varnow=newDate;
if（now-_lastTapDate return;
}
_lastTapDate=now;
varimg=getImg;
if（!
img）{
return;
}
if（_zoom!
=1）{
scaleDown（img）;
}else{
scaleUp（img）;
}
},
setView:
function（e）{
winW=window.innerWidth;
winH=window.innerHeight;
_this.width（window.innerWidth）.height（window.innerHeight）;
translate（（-_index*window.innerWidth）,0,0,$（".pv-inner"）[0]）;
scaleDown（getImg）
}
};
varhandleEvent=function（e）{
switch（e.type）{
case"touchstart":
Event.touchstart（e）;
break;
case"touchmove":
Event.touchmove（e）;
break;
case"touchcancel":
case"touchend":
Event.touchend（e）;
break;
case"orientationchange":
case"resize":
Event.setView（e）;
break
}
};
/**
*绑定事件
*/
varbind=function{
_this.on（"singleTap",function（e）{
e.preventDefault;
varnow=newDate;
if（now-_lastTapDate return;
}
_lastTapDate=now;
Event.click（e）;
returnfalse;
}）.on（"doubleTap",function（e）{
e.preventDefault;
Event.dobelTap（e）;
returnfalse;
}）;
_this.on（"touchstarttouchmovetouchendtouchcancel",function（e）{
handleEvent（e）;
}）;
Event.setView;
"onorientationchange"inwindow?
window.addEventListener（"orientationchange",Event.setView,false）:
window.addEventListener（"resize",Event.setView,false）;
};
/**
*解除事件
*/
varunbind=function{
_this.off;
"onorientationchange"inwindow?
window.removeEventListener（"orientationchange",Event.setView,false）:
window.removeEventListener（"resize",Event.setView,false）
};
vargetDist=function（x1,y1,x2,y2）{
returnMath.sqrt（Math.pow（x2-x1,2）+Math.pow（y2-y1,2）,2）
}
/**
*图片缩放
*/
vargetScale=function（img）{
varh=img.naturalHeight,w=img.naturalWidth,
Scale=w*h/（img.clientHeight*img.clientWidth）;
returnScale;
};
varscaleUp=function（img）{
varscale=getScale（img）;
if（scale>1）
$（img）.css（{"-webkit-transform":
"scale（"+scale+"）","transform":
"scale（"+scale+"）","-webkit-transition":
"200ms","transition":
"200ms"}）;
_zoom=scale;
};
varscaleDown=function（img）{
_zoom=1;
_zoomXY=[0,0];
_doubleDistOrg=1;
_doubleZoomOrg=1;
$（img）.css（{"-webkit-transform":
"scale
（1）","transform":
"scale
（1）","-webkit-transition":
"200ms","transition":
"200ms"}）;
};
/**
*滑动效果
*dist
*/
vartranslate=function（distX,distY,speed,ele）{
if（!
!
ele）{ele=ele.style;}else{return;}
ele.webkitTransitionDuration=ele.MozTransitionDuration=ele.msTransitionDuration=ele.OTransitionDuration=ele.transitionDuration=speed+'ms';
ele.webkitTransform='translate（'+distX+'px,'+distY+'px）'+'translateZ（0）';
ele.msTransform=ele.MozTransform=ele.OTransform='translateX（'+distX+'px）translateY（'+distY+'px）';
};
/**
*更改索引值_index
*/
varchangeIndex=function（index,force）{
if（index index=0;
}elseif（index>=_length）{
index=_length-1;
}
_index=index;
translate（（-_index*window.innerWidth）,0,force?
"0":
"200",$（".pv-inner"）[0]）;
$（"#J_index"）.html（_index+1+"/"+_length）;
imgLoad;
}
/**
*图片获取
*/
vargetImg=function（index）{
varimg=_this.find（"li"）.eq（index||_index）.find（"img"）;
if（img.size==1）{
returnimg[0];
}else{
returnnull
}
}
/**
*图片加载
*/
varimgLoad=function{
if（$（".pv-img"）.eq（_index）.find（"img"）[0]）{
$（"#J_loading"）.css（"display",""）;
return;
}else{
$（"#J_loading"）.css（"display","block"）;
vartempImg=newImage
升级会员 