Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
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
1506 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
    Verwandte Etiketten：
    zepto.js 手机QQ空间 大图查看 ImageView.js
    Quelle：php.cn
    Vorheriger Artikel：Vertiefendes Verständnis der JavaScript-Reihe (28): Detaillierte Erläuterung des Fabrikmusters von Designmustern_Javascript-Fähigkeiten Nächster Artikel：js-Methode zum Implementieren des iGoogleDivDrag-Moduls, Drag-Layer-Drag-Effekt_Javascript-Fähigkeiten
    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
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
    Aus 2024-04-29 11:01:01
    0
    2
    1870
    So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
    Aus 2024-04-23 00:22:19
    0
    10
    2033
    Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
    Aus 2024-04-19 15:37:47
    0
    1
    1712
    Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
    Aus 2024-04-18 23:52:34
    0
    1
    1614
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1627
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage