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

1、#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*/v

2、ar Event=touchstart:function（e）e.preventDefault ;if （_advancedSupport & e.touches & e.touches.length = 2） var img = getImg ;$（img）.css（-webkit-transitionDuration: 0ms,transitionDuration）;_doubleZoomOrg = _zoom;_doubleDistOrg = getDist（e.touches0.pageX, e.touches0.pageY, e.touches1.pageX, e.touches1.

3、pageY）;isDoubleZoom = true;returne = e.touches ? e.touches0 : 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 = _zoomXY0, _zoomXY1;img&（$（img）.css（）;isDrag = trueelse_this.find（.pv-

4、inner）.css（isSlide = true,touchmove:var newDist = getDist（e.touches0.pageX, e.touches0.pageY, e.touches1.pageX, e.touches1.pageY）;_zoom = （newDist/_doubleDistOrg） * _doubleZoomOrgif （_zoom _zoom = 1;_zoomXY = 0, 0;200ms） else if （_zoom getScale（img） * 2）_zoom = getScale（img） * 2;-webkit-transformsca

5、le（ + _zoom + ） translate（ + _zoomXY0 + px, + _zoomXY1 + px）transformif （isDoubleZoom）return;if （_zoom != 1） var deltaX = （e.pageX - _start0） / _zoom;var deltaY = （e.pageY - _start1） / _zoom;var newWidth = img.clientWidth *_zoom,newHeight = img.clientHeight * _zoom;var borderX = （newWidth - winW） /

6、2 / _zoom,borderY = （newHeight - winH） / 2 / _zoom;（borderX = 0）&（_zoomXY0 borderX）&（deltaX /= 3）;（borderY 0）&（_zoomXY1 borderY）&（deltaY /= 3）;_zoomXY0 += deltaX;_zoomXY1 += deltaY;（_length = 1 & newWidth （_length = 1 & newHeight $（img）.css（ + _zoomXY0 +if （!isSlide） return;var deltaX = e.pageX - _s

7、tart0;（_transX 0 | _transX _transX = -_index * winW + deltaX;translate（ + _transX + px,0px） translateZ（0）touchend:if （isDoubleZoom） isDrag）return;if （_length 1 & borderX = 0） var updateDelta = 0;var switchDelta = winW / 6;if （_zoomXY0 updateDelta = 1;else if （_zoomXY0 borderX + switchDelta / _zoom &

8、 _index 0）updateDelta = -1;if （updateDelta !scaleDown（img）;changeIndex（_index + updateDelta）;var delta = Date.now - _orgTime;if （delta （delta var deltaDis = Math.pow（180 / delta, 2）;_zoomXY0 += （_zoomXY0 - _orgZoomXY0） * deltaDis;_zoomXY1 += （_zoomXY1 - _orgZoomXY1） * deltaDis;-webkit-transition400ms cubic-bezier（0.08,0.65,0.79,1）transition else200ms linearif （borderX = 0）if （_zoomXY0 _zoomXY0 = -borderX; borderX）_zoomXY0 = borderX;if （borderY if （_zoomXY1 _