基于zepto.js的模仿手机QQ空间的大图查看组件ImageView.js
基于zepto.js的模仿手机QQ空间的大图查看组件ImageView.js
调用方式 :ImageView(index,imgData) --index参数 为图片默认显示的索引值，类型 为Number --imaData参数 为图片url数组 ，类型为Array
使用之前要先引入 zepto.js 文件
ImageView.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,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.length >= 2) { var img = getImg(); $(img).CSS({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}); _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]]; var img = getImg(); img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"})); isDrag = true }else{ _this.find(".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.touches[0].pageX, e.touches[0].pageY, e.touches[1].pageX, e.touches[1].pageY); _zoom = (newDist/_doubleDistOrg) * _doubleZoomOrg var img = getImg(); $(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}); if (_zoom < 1) { _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(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"}); return }if (isDoubleZoom){return;}e = e.touches ? e.touches[0] : e; if (_zoom != 1) { var deltaX = (e.pageX - _start[0]) / _zoom; var deltaY = (e.pageY - _start[1]) / _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)&&(_zoomXY[0] < -borderX || _zoomXY[0] > borderX)&&(deltaX /= 3); (borderY > 0)&&(_zoomXY[1] < -borderY || _zoomXY[1] > borderY)&&(deltaY /= 3); _zoomXY[0] += deltaX; _zoomXY[1] += deltaY; (_length == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0); (_length == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0); $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"}) }else{if (!isSlide) return; var deltaX = e.pageX - _start[0]; (_transX > 0 || _transX < -winW * (_length - 1))&&(deltaX /= 4); _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 newWidth = 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 (_zoomXY[0] < -borderX - switchDelta / _zoom && _index < _length - 1){ updateDelta = 1; }else if (_zoomXY[0] > borderX + switchDelta / _zoom && _index > 0){ updateDelta = -1; } if (updateDelta != 0) { scaleDown(img); changeIndex(_index + updateDelta); return } } var delta = Date.now() - _orgTime; if (delta < 300) { (delta <= 10)&&(delta = 10); var deltaDis = Math.pow(180 / delta, 2); _zoomXY[0] += (_zoomXY[0] - _orgZoomXY[0]) * deltaDis; _zoomXY[1] += (_zoomXY[1] - _orgZoomXY[1]) * 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 (_zoomXY[0] < -borderX){ _zoomXY[0] = -borderX; }else if (_zoomXY[0] > borderX){ _zoomXY[0] = borderX; } } if (borderY > 0){ if (_zoomXY[1] < -borderY){ _zoomXY[1] = -borderY; }else if (_zoomXY[1] >borderY){ _zoomXY[1] = borderY; } } if (Math.abs(_zoomXY[0]) < 10) { $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(0px," + _zoomXY[1] + "px)"}); return } else{ $(img).css({"-webkit-transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)","transform": "scale(" + _zoom + ") translate(" + _zoomXY[0] + "px," + _zoomXY[1] + "px)"}); } isDrag = false}else{if (!isSlide){ return;} var deltaX = _transX - -_index * winW;var updateDelta = 0; if (deltaX > 50){ updateDelta = -1; }else if(deltaX < -50){ 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 < 500){ return; } _lastTapDate = now; var img = getImg(); if (!img){ return;