Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung von ImageView.js, einer großen Bildbetrachtungskomponente, die den QQ-Bereich von Mobiltelefonen basierend auf den Fähigkeiten von zepto.js_javascript imitiert

WBOY
Freigeben: 2016-05-16 16:11:13
Original
1498 Leute haben es durchsucht

Aufrufmethode: ImageView(index,imgData) --index-Parameter ist der vom Bild standardmäßig angezeigte Indexwert, Typ ist Zahl --imaData-Parameter ist Bild-URL-Array, Typ ist Array

Stellen Sie die Datei zepto.js vor, bevor Sie sie verwenden

Der spezifische Code von ImageView.js lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

/*
* ImageView v1.0.0
* --Anzeige großer Bilder basierend auf zepto.js
* --Call-Methode ImageView(index,imgDada)
* --index Bild-Standardwert-Anzeigeindex, Zahl --imgData Bild-URL-Array, 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;
/**
* Ereignisobjektereignis
​​*/
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;
                 zurück
            }
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
               }sonst{
​​​​​​​ _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)"});
                zurück
            }
            if (isDoubleZoom){
                zurück;
            }
            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 ") translator(" _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) translatorZ(0)"});
            }
        },
        touchend:function(e){
            if (isDoubleZoom) {
                zurück;
            }
            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);
                        zurück
                    }
                }
                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) })
                } 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)"});
                    zurück
                } 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 = neues Datum;
            if (jetzt - _lastTapDate < 500){
                zurück;
            }
            _lastTapDate = now;
            var img = getImg();
            if (!img){
                zurück;
            }
            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){
        Schalter (e.type){
            Fall „touchstart“:
                Event.touchstart(e);
                Pause;
            Fall „touchmove“:
                Event.touchmove(e);
                Pause;
            Fall „touchcancel“:
            Fall „touchend“:
                Event.touchend(e);
                Pause;
            Fall „orientierungsänderung“:
            Fall „Größe ändern“:
                Event.setView(e);
                Pause
        }
    };
    /**
* Bindungsereignis
​​*/
    var bind=function(){
        _this.on("singleTap",function(e){
            e.preventDefault();
            var now = neues Datum;
            if (jetzt - _lastTapDate < 500){
                zurückkehren;           
            }
            _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“ im Fenster? window.addEventListener("orientationchange",Event.setView,false) : window.addEventListener("resize",Event.setView,false);
    };
    /**
* * Ereignis verwerfen
​​*/
    var unbind= function() {
         _this.off();
        „onorientationchange“ im Fenster? window.removeEventListener("orientationchange",Event.setView, false) : window.removeEventListener("resize",Event.setView, false)
    };
    var getDist= function(x1, y1, x2, y2) {
        Rückgabe Math.sqrt(Math.pow(x2 - x1, 2) Math.pow(y2 - y1, 2), 2)
    }
    /**
* Bildzoom
​​*/
    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);
        wenn (Skala > 1)
            $(img).css({"-webkit-transform": "scale(" scale ")","transform": "scale(" scale ")","-webkit-transition": "200ms","transition ": "200ms"});
        _zoom = Maßstab;
    };
    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 "});
    };
    /**
* Gleiteffekt
* dist
​​*/
    var translator = 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 < 0){
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<_length;i++){
    $(".pv-inner").append("
  • ")
            }
            imgLoad();
        };
        /**
         * 大图查看初始化
         */
        var init=function(){
            !!_this[0]||$("body").append("
    ");
    ​ ​ _this=$("#slideView");
    ($.os.iphone || $.os.android && parseFloat($.os.version) >= 4)&&(_advancedSupport = true);
    }();
    /**
    * * Große Bildansicht-Rückgabeschnittstellenfunktion
    * ImageView(index,data)
    * Index-Anfangsindexwert nubmer
    * Datenbild-Array-Array
    ​​*/
    var ImageView=function(index,data){
    ​​​​ _ImgData=data;
    ​​​​ _index=index;
    _length=data.length;
    //Dom-Struktur erstellen
    ​​​Create();
    //Dom-Strukturanzeige
    ​ ​ _this.css("display","block");
    ​​​​ //Ereignis binden
             bind();
    }
    Return ImageView;
    })(window,Zepto);
     

    Der von ImageView.js verwendete CSS-Code lautet wie folgt:

    Code kopieren Der Code lautet wie folgt:

    /*大图查看*/
    .slide-view {Hintergrund: #000;Position: fest;Breite: 100 %;Höhe: 100 %;Überlauf: versteckt;oben: 0;links: 0;z-Index: 100;Deckkraft:0;Anzeige: keine; -webkit-animation:fadeIn .2s linear vorwärts;animation:fadeIn .2s linear vorwärts;-webkit-touch-callout: none;-webkit-transform-style: Preserve-3d; }
    .slide-view .counts {position: absolute;oben: 5%;links: 0;rechts: 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); Farbe: #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: versteckt;Übergang: alle 350 ms linear;backface-visibility: versteckt;-webkit-touch-callout: keine;-webkit-transform-style: Preserve-3d; }
    .pv-inner li {text-align: center;display: -webkit-box;display: box;-webkit-box-align: center;overflow: versteckt;width: 100%;height: 100%;-webkit-touch -callout: keine;Rückseitensichtbarkeit: versteckt;-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 : sichtbar;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility: versteckt;-webkit-transform-style : Preserve-3D; }
    @-webkit-keyframes fadeIn{
        0 %{opacity:0;}
        100 %{opacity:1;}
    }
    @keyframes fadeIn{
        0 %{opacity:0;}
        100 %{opacity:100%;}
    }
    /*--------------------Laden---------*/
    .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 unendlich linear;Animation: Loading-Spin 1s unendlich linear;}
    .ui-loading i {-webkit-animation: Loading-Spin 1s unendlich linear;Animation: Loading-Spin 1s unendlich 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;Animationsname: Loading-spin-two}
    @-webkit-keyframes Loading-Spin {
        0 % {Deckkraft: 0}
        30 % {opacity: 1;-webkit-transform: scale(1,1.2)}
        60 % {opacity: 0;-webkit-transform: scale(1)}
        100 % {Deckkraft: 0}
    }
    @-webkit-keyframes Loading-Spin-One {
        0 % {Deckkraft: 0}
        20 % {Deckkraft: 0}
        50 % {opacity: 1;-webkit-transform: scale(1,1.2)}
        80 % {opacity: 0;-webkit-transform: scale(1)}
        100 % {Deckkraft: 0}
    }
    @-webkit-keyframes Loading-Spin-Two {
        0 % {Deckkraft: 0}
        40 % {Deckkraft: 0}
        70 % {opacity: 1;-webkit-transform: scale(1,1.2)}
        100 % {opacity: 0;-webkit-transform: scale(1)}
    }
    @keyframes Loading-Spin {
        0 % {Deckkraft: 0}
        30 % {opacity: 1;transform: scale(1,1.2)}
        60 % {opacity: 0;transform: scale(1)}
        100 % {Deckkraft: 0}
    }
    @keyframes Loading-Spin-One {
        0 % {Deckkraft: 0}
        20 % {Deckkraft: 0}
        50 % {opacity: 1;transform: scale(1,1.2)}
        80 % {opacity: 0;transform: scale(1)}
        100 % {Deckkraft: 0}
    }
    @keyframes Loading-Spin-Two {
        0 % {Deckkraft: 0}
        40 % {Deckkraft: 0}
        70 % {opacity: 1;transform: scale(1,1.2)}
        100 % {opacity: 0;transform: scale(1)}
    }
    /*--------------------Ladeende--------*/

    ps:代码功能比较简单,可能会存在诸多问题。但也能勉强使用了

    下用是使用ImageView.js的一个例子:

    复制代码 代码如下:




              
               
                                                                                                 
              


                
               
                                                                                          ;(function(){
    // Holen Sie sich das Bildelement in HTML
                  var aImg=document.querySelectorAll("img"),
    aImgSrc=[];
    //Ein Klickereignis an das Bild binden
    for(var i=0,l=aImg.length;i                     aImg[i].index=i;
                         aImg[i].className = "conPic";
    aImgSrc.push(aImg[i].src);
                    }
    for(var i=0;i<$(".conPic").length;i ){
    If($(".conPic")[i].complete){
                               addTap($(".conPic")[i])
                           }else{
    $(".conPic")[i].onload=function(){
                                 addTap(this);
                                                                                                           }                  }
                    }
    Funktion addTap(obj){
    $(obj).on("tap",function(){
    //ImageView aufrufen
    ImageView($(obj)[0].index,aImgSrc);
                         })
                    }
                 })();
                                                                                         



    Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen
    Quelle:php.cn
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage