《基于zepto.js实现仿手机qq空间的大图查看组件imageview.js详解.doc》由会员分享，可在线阅读，更多相关《基于zepto.js实现仿手机qq空间的大图查看组件imageview.js详解.doc（27页珍藏版）》请在金锄头文库上搜索。
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具体代码如下：代码如下:/* ImageView v1.0.0* -基于ze
2、pto.js的大图查看* -调用方法 ImageView(index,imgDada)* -index 图片默认值显示索引,Number -imgData 图片url数组,Array* */var ImageView=(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=
3、1,_doubleZoomOrg=1,isDoubleZoom = false,isSlide=true,isDrag=false,timer=null,winW=window.innerWidth,winH=window.innerHeight;/* 事件对象 event*/var Event=touchstart:function(e)e.preventDefault ;if (_advancedSupport & e.touches & e.touches.length = 2) var img = getImg ;$(img).css(-webkit-transitionDuratio
4、n: 0ms,transitionDuration: 0ms);_doubleZoomOrg = _zoom;_doubleDistOrg = getDist(e.touches0.pageX, e.touches0.pageY, e.touches1.pageX, e.touches1.pageY);isDoubleZoom = true;returne = e.touches ? e.touches0 : e;isDoubleZoom = false;_start = e.pageX, e.pageY;_org = e.pageX, e.pageY;_orgTime = Date.now
5、;_transX = -_index * winW;if(_zoom!=1)_zoomXY = _zoomXY | 0, 0;_orgZoomXY = _zoomXY0, _zoomXY1;var img = getImg ;img&($(img).css(-webkit-transitionDuration: 0ms,transitionDuration: 0ms);isDrag = trueelse_this.find(.pv-inner).css(-webkit-transitionDuration:0ms,transitionDuration:0ms);isSlide = true,t
6、ouchmove:function(e)e.preventDefault ;if (_advancedSupport & e.touches & e.touches.length = 2) var newDist = getDist(e.touches0.pageX, e.touches0.pageY, e.touches1.pageX, e.touches1.pageY);_zoom = (newDist/_doubleDistOrg) * _doubleZoomOrgvar img = getImg ;$(img).css(-webkit-transitionDuration: 0ms,t
7、ransitionDuration: 0ms);if (_zoom _zoom = 1;_zoomXY = 0, 0;$(img).css(-webkit-transitionDuration: 200ms,transitionDuration: 200ms) else if (_zoom getScale(img) * 2)_zoom = getScale(img) * 2;$(img).css(-webkit-transform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px),transform: scale
8、( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px);returnif (isDoubleZoom)return;e = e.touches ? e.touches0 : e;if (_zoom != 1) var deltaX = (e.pageX - _start0) / _zoom;var deltaY = (e.pageY - _start1) / _zoom;_start = e.pageX, e.pageY;var img = getImg ;var newWidth = img.clientWidth *_zoom,
9、newHeight = img.clientHeight * _zoom;var borderX = (newWidth - winW) / 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
10、 $(img).css(-webkit-transform: scale( + _zoom + ) translate( + _zoomXY0 +px, + _zoomXY1 + px),transform: scale( + _zoom + ) translate( + _zoomXY0 +px, + _zoomXY1 + px)elseif (!isSlide) return;var deltaX = e.pageX - _start0;(_transX 0 | _transX _transX = -_index * winW + deltaX;_this.find(.pv-inner).
11、css(-webkit-transform:translate( + _transX + px,0px) translateZ(0);,touchend:function(e)if (isDoubleZoom) return;if (_zoom != 1) if (!isDrag)return;var img = getImg ;var newWidth = img.clientWidth *_zoom,newHeight = img.clientHeight * _zoom;var borderX = (newWidth - winW) / 2 / _zoom,borderY = (newH
12、eight - winH) / 2 / _zoom;if (_length 1 & borderX = 0) var updateDelta = 0;var switchDelta = winW / 6;if (_zoomXY0 updateDelta = 1;else if (_zoomXY0 borderX + switchDelta / _zoom & _index 0)updateDelta = -1;if (updateDelta != 0) scaleDown(img);changeIndex(_index + updateDelta);returnvar delta = Date
13、.now - _orgTime;if (delta (delta var deltaDis = Math.pow(180 / delta, 2);_zoomXY0 += (_zoomXY0 - _orgZoomXY0) * deltaDis;_zoomXY1 += (_zoomXY1 - _orgZoomXY1) * deltaDis;$(img).css(-webkit-transition: 400ms cubic-bezier(0.08,0.65,0.79,1),transition: 400ms cubic-bezier(0.08,0.65,0.79,1) else$(img).css(-webkit-transition: 200ms linear,transition: 200ms linear);if (borderX = 0)if (_zoomXY0 _zoomXY0 = -borderX;else if (_zoomXY0 borderX)_zoomXY0 = borderX;if (borderY 0)if (_zoomXY1 _zoomXY1 = -borderY;else if (_z
