基于zeptojs实现仿手机QQ空间的大图查看组件ImageViewjs详解文档格式.docx

基于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]　　_