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

1、基于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 文件 ImageVie

2、w.js具体代码如下： 代码如下: /* * ImageView v1.0.0 * -基于zepto.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,

3、0,_transX=null, _advancedSupport = false, _doubleDistOrg=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

4、.length = 2) var img = getImg ; $(img).css(-webkit-transitionDuration: 0ms,transitionDuration: 0ms); _doubleZoomOrg = _zoom; _doubleDistOrg = getDist(e.touches0.pageX, e.touches0.pageY, e.touches1.pageX, e.touches1.pageY); isDoubleZoom = true; return e = e.touches ? e.touches0 : e; isDoubleZoom = fa

5、lse; _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; var img = getImg ; img&($(img).css(-webkit-transitionDuration: 0ms,transitionDuration: 0ms); isDrag = true else _this.find(

6、.pv-inner).css(-webkit-transitionDuration:0ms,transitionDuration:0ms); isSlide = true , touchmove: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/_d

7、oubleDistOrg) * _doubleZoomOrg var img = getImg ; $(img).css(-webkit-transitionDuration: 0ms,transitionDuration: 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(

8、-webkit-transform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px),transform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px); return if (isDoubleZoom) return; e = e.touches ? e.touches0 : e; if (_zoom != 1) var deltaX = (e.pageX - _start0) / _zoom; var deltaY = (e.pa

9、geY - _start1) / _zoom; _start = e.pageX, e.pageY; var img = getImg ; var newWidth = img.clientWidth *_zoom, newHeight = img.clientHeight * _zoom; var borderX = (newWidth - winW) / 2 / _zoom, borderY = (newHeight - winH) / 2 / _zoom; (borderX = 0)&(_zoomXY0 borderX)&(deltaX /= 3); (borderY 0)&(_zoom

10、XY1 borderY)&(deltaY /= 3); _zoomXY0 += deltaX; _zoomXY1 += deltaY; (_length = 1 & newWidth (_length = 1 & newHeight $(img).css(-webkit-transform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px),transform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px) else if (!isSl

11、ide) return; var deltaX = e.pageX - _start0; (_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; var img = getImg ; var n

12、ewWidth = img.clientWidth *_zoom, newHeight = img.clientHeight * _zoom; var borderX = (newWidth - winW) / 2 / _zoom, borderY = (newHeight - winH) / 2 / _zoom; if (_length 1 & borderX = 0) var updateDelta = 0; var switchDelta = winW / 6; if (_zoomXY0 updateDelta = 1; else if (_zoomXY0 borderX + switc

13、hDelta / _zoom & _index 0) updateDelta = -1; if (updateDelta != 0) scaleDown(img); changeIndex(_index + updateDelta); return var delta = Date.now - _orgTime; if (delta (delta var deltaDis = Math.pow(180 / delta, 2); _zoomXY0 += (_zoomXY0 - _orgZoomXY0) * deltaDis; _zoomXY1 += (_zoomXY1 - _orgZoomXY1

14、) * 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 = bord

15、erX; if (borderY 0) if (_zoomXY1 _zoomXY1 = -borderY; else if (_zoomXY1 borderY) _zoomXY1 = borderY; if (Math.abs(_zoomXY0) $(img).css(-webkit-transform: scale( + _zoom + ) translate(0px, + _zoomXY1 + px),transform: scale( + _zoom + ) translate(0px, + _zoomXY1 + px); return else $(img).css(-webkit-t

16、ransform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px),transform: scale( + _zoom + ) translate( + _zoomXY0 + px, + _zoomXY1 + px); isDrag = false else if (!isSlide) return; var deltaX = _transX - -_index * winW; var updateDelta = 0; if (deltaX 50) updateDelta = -1; else if(deltaX

17、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); var now = new Date; if (now - _lastTapDate

18、return; _lastTapDate = now; var img = 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

19、); scaleDown(getImg ) ; var handleEvent=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 ; /* * 绑定事件 */ var bind=

20、function _this.on(singleTap,function(e) e.preventDefault ; var now = new Date; if (now - _lastTapDate return; _lastTapDate = now; Event.click(e); return false; ).on(doubleTap, function(e) e.preventDefault ; Event.dobelTap(e); return false; ); _this.on(touchstart touchmove touchend touchcancel, funct

21、ion(e) handleEvent(e); ); Event.setView ; onorientationchange in window ? window.addEventListener(orientationchange,Event.setView,false) : window.addEventListener(resize,Event.setView,false); ; /* * 解除事件 */ var unbind= function _this.off ; onorientationchange in window ? window.removeEventListener(o

22、rientationchange,Event.setView, false) : window.removeEventListener(resize,Event.setView, false) ; var getDist= function(x1, y1, x2, y2) return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2), 2) /* * 图片缩放 */ var getScale=function(img) var h = img.naturalHeight, w = img.naturalWidth, Scale=w*h

23、/(img.clientHeight*img.clientWidth); return Scale; ; var scaleUp=function(img) var scale = getScale(img); if (scale 1) $(img).css(-webkit-transform: scale( + scale + ),transform: scale( + scale + ),-webkit-transition: 200ms,transition: 200ms); _zoom = scale; ; var scaleDown=function(img) _zoom = 1;

24、_zoomXY = 0, 0; _doubleDistOrg = 1; _doubleZoomOrg = 1; $(img).css(-webkit-transform: scale(1),transform: scale(1),-webkit-transition: 200ms,transition: 200ms); ; /* * 滑动效果 * dist */ var translate = function( distX,distY,speed,ele) if( !ele ) ele=ele.style; else return; ele.webkitTransitionDuration

25、= 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);

26、 ; /* * 更改索引值 _index */ var changeIndex=function(index,force) if (index index = 0; else if(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 ; /* * 图片获取 */ var getImg=function(index) var img = _this.find(li).eq(index | _index).find(img); if (img.size = 1) return img0; else return null /* * 图片加载 */ var imgLoad=function if($(.pv-img).eq(_index).find(img)0) $(#J_loading).css(display,); return; else $(#J_loading).css(display,block); var tempImg=new Image