调用方式 :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                     _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)&&(deltax /= 3);
                (bordery > 0)&&(_zoomxy[1] bordery)&&(deltay /= 3);
                _zoomxy[0] += deltax;
                _zoomxy[1] += deltay;
                (_length == 1 && newwidth                 (_length == 1 && newheight                 $(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                 _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]                         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                     (delta                     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]                         _zoomxy[0] = -borderx;
                    }else if (_zoomxy[0] > borderx){
                        _zoomxy[0] = borderx;
                    }
                }
                if (bordery > 0){
                    if (_zoomxy[1]                         _zoomxy[1] = -bordery;
                    }else if (_zoomxy[1] >bordery){
                        _zoomxy[1] = bordery;
                    }
                }
                if (math.abs(_zoomxy[0])                     $(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                     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                 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]);
            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=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, function(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(orientationchange,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/(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;
        _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 =  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)';
    };
    /**
     * 更改索引值 _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 img[0];
        }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(),w,h,set;
            tempimg.src=_imgdata[_index];
            $(.pv-img).eq(_index)[0].appendchild(tempimg);
            tempimg.onload=function(){
                $(#j_loading).css(display,);
            }
        }
    };
    /**
     * 创建大图查看dome结构
     */
    var create=function(){
        _this.append().append(+(_index+1)+/+_length+
).append()
        for(var i=0;i            $(.pv-inner).append()
        }
        imgload();
    };
    /**
     * 大图查看初始化
     */
    var init=function(){
        !!_this[0]||$(body).append(
);
        _this=$(#slideview);
        ($.os.iphone || $.os.android && parsefloat($.os.version) >= 4)&&(_advancedsupport = true);
    }();
    /**
     * 大图查看返回接口函数
     * imageview(index,data)
     * index 初始索引值 nubmer
     * data 图片数组 array
     */
    var imageview=function(index,data){
        _imgdata=data;
        _index=index;
        _length=data.length;
        //创建dom结构
        create();
        //dom结构显示
        _this.css(display,block);
        //绑定事件
        bind();
    }
    return imageview;
})(window,zepto);
imageview.js用到的css代码如下：
复制代码 代码如下:
/*大图查看*/
.slide-view {background: #000;position: fixed;width: 100%;height: 100%;overflow: hidden;top: 0;left: 0;z-index: 100;opacity:0;display: none;-webkit-animation:fadein .2s linear forwards;animation:fadein .2s linear forwards;-webkit-touch-callout: none;-webkit-transform-style: preserve-3d; }
.slide-view .counts {position: absolute;top: 5%;left: 0;right: 0;text-align: center;font-size: 0;-webkit-transform-style: preserve-3d; }
.slide-view .counts .value {border-radius: 9px;line-height: 18px;padding: 0 6px;font-size: 11px;display: inline-block;background-color: rgba(102,102,102,.6);color: #f1f1f1;}
.pv-inner {position: relative;z-index: -1;display: -webkit-box;display: box;width: 100%;height: 100%;-webkit-transition: all 350ms linear;-webkit-backface-visibility: hidden;transition: all 350ms linear;backface-visibility: hidden;-webkit-touch-callout: none;-webkit-transform-style: preserve-3d; }
.pv-inner li {text-align: center;display: -webkit-box;display: box;-webkit-box-align: center;overflow: hidden;width: 100%;height: 100%;-webkit-touch-callout: none;backface-visibility: hidden;-webkit-transform-style: preserve-3d; }
.pv-inner img {max-width: 97%;max-height: 100%;-webkit-transform: scale(1) translate(0px,0px);transform: scale(1) translate(0px,0px);visibility: visible;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility: hidden;-webkit-transform-style: preserve-3d; }
@-webkit-keyframes fadein{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadein{
    0%{opacity:0;}
    100%{opacity:100%;}
}
/*--------------------loading-----------------------*/
.ui-loading {position: absolute;left: 50%;top: 50%;display: none;vertical-align: middle;font: 0/0 arial;margin: -5px 0 0 -10px;}
.ui-loading i {display: inline-block;width: 5px;height: 12px;background: #fff;vertical-align: top;-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear;}
.ui-loading i {-webkit-animation: loading-spin 1s infinite linear;animation: loading-spin 1s infinite linear}
.ui-loading i.t2 {margin: 0 3px;-webkit-animation-name: loading-spin-one;animation-name: loading-spin-one}
.ui-loading i.t3 {-webkit-animation-name: loading-spin-two;animation-name: loading-spin-two}
@-webkit-keyframes loading-spin {
    0% {opacity: 0}
    30% {opacity: 1;-webkit-transform: scale(1,1.2)}
    60% {opacity: 0;-webkit-transform: scale(1)}
    100% {opacity: 0}
}
@-webkit-keyframes loading-spin-one {
    0% {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1;-webkit-transform: scale(1,1.2)}
    80% {opacity: 0;-webkit-transform: scale(1)}
    100% {opacity: 0}
}
@-webkit-keyframes loading-spin-two {
    0% {opacity: 0}
    40% {opacity: 0}
    70% {opacity: 1;-webkit-transform: scale(1,1.2)}
    100% {opacity: 0;-webkit-transform: scale(1)}
}
@keyframes loading-spin {
    0% {opacity: 0}
    30% {opacity: 1;transform: scale(1,1.2)}
    60% {opacity: 0;transform: scale(1)}
    100% {opacity: 0}
}
@keyframes loading-spin-one {
    0% {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1;transform: scale(1,1.2)}
    80% {opacity: 0;transform: scale(1)}
    100% {opacity: 0}
}
@keyframes loading-spin-two {
    0% {opacity: 0}
    40% {opacity: 0}
    70% {opacity: 1;transform: scale(1,1.2)}
    100% {opacity: 0;transform: scale(1)}
}
/*--------------------loading-end----------------------*/
ps:代码功能比较简单，可能会存在诸多问题。但也能勉强使用了
下用是使用imageview.js的一个例子：
复制代码 代码如下:
移动端大图查看
以上就是本文的全部内容了，希望大家能够喜欢