基于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;