基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解文档格式.docx
《基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解文档格式.docx》由会员分享,可在线阅读,更多相关《基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解文档格式.docx(11页珍藏版)》请在冰豆网上搜索。
#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"
});
_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]];
img&
($(img).css({"
}));
isDrag=true
}else{
_this.find("
.pv-inner"
).css({"
"
isSlide=true
},
touchmove:
varnewDist=getDist(e.touches[0].pageX,e.touches[0].pageY,e.touches[1].pageX,e.touches[1].pageY);
_zoom=(newDist/_doubleDistOrg)*_doubleZoomOrg
if(_zoom _zoom=1;
_zoomXY=[0,0];
200ms"
})
}elseif(_zoom>
getScale(img)*2){
_zoom=getScale(img)*2;
-webkit-transform"
scale("
+_zoom+"
)translate("
+_zoomXY[0]+"
px,"
+_zoomXY[1]+"
px)"
transform"
if(isDoubleZoom){
return;
if(_zoom!
=1){
vardeltaX=(e.pageX-_start[0])/_zoom;
vardeltaY=(e.pageY-_start[1])/_zoom;
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({"
+_zoomXY[0]+
"
if(!
isSlide)return;
vardeltaX=e.pageX-_start[0];
(_transX>
0||_transX _transX=-_index*winW+deltaX;
translate("
+_transX+"
px,0px)translateZ(0)"
touchend:
if(isDoubleZoom){
isDrag){return;
}
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!
scaleDown(img);
changeIndex(_index+updateDelta);
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;
-webkit-transition"
400mscubic-bezier(0.08,0.65,0.79,1)"
transition"
}else{
200mslinear"
if(borderX>
=0){
if(_zoomXY[0] _zoomXY[0]=-borderX;
borderX){
_zoomXY[0]=borderX;
if(borderY>
if(_zoomXY[1] _