masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang ImageView.js, komponen tontonan imej besar yang meniru ruang QQ telefon mudah alih berdasarkan kemahiran zepto.js_javascript

Penjelasan terperinci tentang ImageView.js, komponen tontonan imej besar yang meniru ruang QQ telefon mudah alih berdasarkan kemahiran zepto.js_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan： 2016-05-16 16:11:13
asal
1580 orang telah melayarinya

Kaedah panggilan: ImageView(index,imgData) --parameter indeks ialah nilai indeks yang dipaparkan oleh imej secara lalai, jenis ialah Nombor --parameter imaData ialah tatasusunan url imej, jenis ialah Tatasusunan

Perkenalkan fail zepto.js sebelum menggunakannya

Kod khusus ImageView.js adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

/*
* ImageView v1.0.0
* --Paparan imej besar berdasarkan zepto.js
* --Panggil kaedah ImageView(index,imgDada)
* --index Indeks paparan nilai lalai imej, Nombor --imgData Tatasusunan url imej, Tatasusunan
* */
var ImageView=(fungsi(tetingkap,$){
var _this=$("#slideView"),_ImgData=[],_index=0,_length=0,
​​​​ _start=[],_org=[],_orgTime=null,
​​​​ _lastTapDate=null,
​​​​ _zoom=1,_zoomXY=[0,0],_transX=null,
​​ _advancedSupport = palsu,
​​​​ _doubleDistOrg=1,_doubleZoomOrg=1,isDoubleZoom = palsu,
​​​​ isSlide=true,isDrag=false,timer=null,
       winW=window.innerWidth,winH=window.innerHeight;
/**
* Acara objek acara
'*/
var Acara={
         touchstart:function(e){
              e.preventDefault();
Jika (_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;
                 kembali
            }
e = e.sentuhan ? e.sentuhan[0] : e;
               adalahDoubleZoom = palsu;
​​​​​​ _start = [e.pageX, e.pageY];
             _org = [e.pageX, e.pageY];
​​​​​​​ _orgTime = Date.now();
​​​​​​ _transX = -_index * winW;
               jika(_zum!=1){
                   _zoomXY = _zoomXY [0, 0];
                 _orgZoomXY = [_zoomXY[0], _zoomXY[1]];
              var img = getImg();
                  img&&($(img).css({"-webkit-transitionDuration": "0ms","transitionDuration": "0ms"}));
                     isDrag = benar
               } lain{
​​​​​​​ _this.find(".pv-inner").css({"-webkit-transitionDuration":"0ms","transitionDuration":"0ms"});
                    isSlide = benar
            }
},
        touchmove:function(e){
              e.preventDefault();
Jika (_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"});
                jika (_zoom < 1) {
                    _zum = 1;
                    _zoomXY = [0, 0];
                    $(img).css({"-webkit-transitionDuration": "200ms","transitionDuration": "200ms"})
                } lain jika (_zoom >getScale(img) * 2){
                     _zoom = getScale(img) * 2;
                }
                $(img).css({"-webkit-transform": "skala(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)"});
                kembali
            }
            jika (isDoubleZoom){
                kembali;
            }
            e = e.sentuhan ? e.sentuhan[0] : e;
            jika (_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);
                (sempadanY > 0)&&(_zoomXY[1] < -sempadanY || _zoomXY[1] > sempadanY)&&(deltaY /= 3);
                _zoomXY[0] = deltaX;
                _zoomXY[1] = deltaY;
                (_panjang == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0);
                (_panjang == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0);
                $(img).css({"-webkit-transform": "skala(" _zoom ") translate(" _zoomXY[0]
                    "px," _zoomXY[1] "px)","transform": "skala(" _zoom ") translate(" _zoomXY[0]
                    "px," _zoomXY[1] "px)"})
            }lain{
                jika (!isSlide) kembali;
                var deltaX = e.pageX - _start[0];
                (_transX > 0 || _transX < -winW * (_panjang - 1))&&(deltaX /= 4);
                _transX = -_index * winW deltaX;
                _this.find(".pv-inner").css({"-webkit-transform":"translate(" _transX "px,0px) translateZ(0)"});
            }
        },
        touchend:function(e){
            jika (isDoubleZoom) {
                kembali;
            }
            jika (_zoom != 1) {
                jika (!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;
                jika (_panjang > 1 && sempadanX >= 0) {
                    var updateDelta = 0;
                    var switchDelta = winW / 6;
                    jika (_zoomXY[0] < -borderX - switchDelta / _zoom && _index < _panjang - 1){
                        kemas kiniDelta = 1;
                    }lain jika (_zoomXY[0] > borderX suisDelta / _zoom && _index > 0){
                        updateDelta = -1;
                    }
                    jika (kemas kiniDelta != 0) {
                        scaleDown(img);
                        changeIndex(_index updateDelta);
                        kembali
                    }
                }
                var delta = Date.now() - _orgTime;
                jika (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)" })
                } lain{
                    $(img).css({"-webkit-transition": "200ms linear","transition": "200ms linear"});
                }
                jika (borderX >= 0){
                    jika (_zoomXY[0] < -borderX){
                        _zoomXY[0] = -borderX;
                    }lain jika (_zoomXY[0] > borderX){
                        _zoomXY[0] = sempadanX;
                    }
                }
                jika (sempadanY > 0){
                    jika (_zoomXY[1] < -borderY){
                        _zoomXY[1] = -borderY;
                    }lain jika (_zoomXY[1] >borderY){
                        _zoomXY[1] = sempadanY;
                    }
                }
                jika (Math.abs(_zoomXY[0]) < 10) {
                    $(img).css({"-webkit-transform": "skala(" _zoom ") translate(0px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translate(0px ," _zoomXY[1] "px)"});
                    kembali
                } lain{
                    $(img).css({"-webkit-transform": "skala(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translate(" _zoomXY[0] "px," _zoomXY[1] "px)"});
                }
                isDrag = palsu
            }lain{
                jika (!isSlide){ return;}
                var deltaX = _transX - -_index * winW;
                var updateDelta = 0;
                jika (deltaX > 50){
                    updateDelta = -1;
                }lain jika(deltaX < -50){
                    kemas kiniDelta = 1;
                }
                _index=_index updateDelta;
                changeIndex(_index);
                isSlide =palsu
            }
        },
        klik:fungsi(e){
            _zoom=1;
            _zoomXY=[0,0];
            _this.css("opacity","0");
            timer=setTimeout(function(){
                _this.css({"display":""}).html("");
                buka ikatan();
            },150)
        },
        dobelTap:function(e){
            clearTimeout(pemasa);
            var sekarang = Tarikh baharu;
            jika (sekarang - _lastTapDate < 500){
                kembali;
            }
            _lastTapDate = sekarang;
            var img = getImg();
            jika (!img){
                kembali;
            }
            jika (_zoom != 1){
                scaleDown(img);
            }lain{
                scaleUp(img);
            }
        },
        setView:function(e){
            winW=window.innerWidth;
            winH=window.innerHeight;
            _this.width(window.innerWidth).height(window.innerHeight);
            terjemah((-_index*window.innerWidth),0,0,$(".pv-inner")[0]);
            scaleDown(getImg())
        }
    };
    var handleEvent=function(e){
        suis (e.type){
            kes "mula sentuh":
                Event.touchstart(e);
                rehat;
            kes "touchmove":
                Event.touchmove(e);
                rehat;
            kes "sentuh batal":
            kes "sentuhan":
                Event.touchend(e);
                rehat;
            kes "orientationchange":
            kes "ubah saiz":
                Event.setView(e);
                putus
        }
    };
    /**
* Acara mengikat
'*/
    var bind=function(){
        _this.on("singleTap",fungsi(e){
            e.preventDefault();
            var sekarang = Tarikh baharu;
            jika (sekarang - _lastTapDate < 500){
                kembali;           
            }
            _lastTapDate = sekarang;
            Event.click(e);
            pulangkan palsu;
        }).on("doubleTap", fungsi(e) {
            e.preventDefault();
            Event.dobelTap(e);
            pulangkan palsu;
        });
        _this.on("touchstart touchmove touchend touchcancel", fungsi(e) {
            handleEvent(e);
        });
        Event.setView();
        "onorientationchange" dalam tetingkap ? window.addEventListener("orientationchange",Event.setView,false) : window.addEventListener("resize",Event.setView,false);
    };
    /**
* * Tolak acara
'*/
    var unbind= function() {
         _this.off();
        "onorientationchange" dalam tetingkap ? window.removeEventListener("orientationchange",Event.setView, false) : window.removeEventListener("resize",Event.setView, false)
    };
    var getDist= function(x1, y1, x2, y2) {
        kembalikan Math.sqrt(Math.pow(x2 - x1, 2) Math.pow(y2 - y1, 2), 2)
    }
    /**
* Zum imej
'*/
    var getScale=function(img) {
        var h = img.naturalHeight, w = img.naturalWidth,
        Skala=w*h/(img.clientHeight*img.clientWidth);
        kembali Skala;
    };
    var scaleUp=function(img) {
        skala var = getScale(img);
        jika (skala > 1)
            $(img).css({"-webkit-transform": "skala(" skala ")","transform": "skala(" skala ")","-webkit-transition": "200ms","transition ": "200ms"});
        _zoom = skala;
    };
    var scaleDown=function(img) {
        _zum = 1;
        _zoomXY = [0, 0];
        _doubleDistOrg = 1;
        _doubleZoomOrg = 1;
        $(img).css({"-webkit-transform": "skala(1)","transform": "skala(1)","-webkit-transition": "200ms","transition": "200ms "});
    };
    /**
* Kesan gelongsor
* 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 < 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 = benar);
    }();
    /**
    * * Fungsi antara muka pulangan paparan gambar besar
    * ImageView(indeks,data)
    * indeks nilai indeks awal nubmer
    * tatasusunan tatasusunan imej data
    '*/
    var ImageView=fungsi(indeks,data){
    ​​​​ _ImgData=data;
    ​​ _index=index;
    _length=data.length;
    //Buat struktur dom
    ​Buat();
    //paparan struktur dom
    ​ _this.css("paparan","sekat");
    //Ikatan acara
             bind();
    }
    Kembalikan ImageView;
    })(tetingkap,Zepto);
    　

    Kod css yang digunakan oleh ImageView.js adalah seperti berikut:

    Salin kod Kod adalah seperti berikut:

    /*大图查看*/
    .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: tiada;-webkit-transform-style: preserve-3d; }
    .slide-view .counts {kedudukan: mutlak;atas: 5%;kiri: 0;kanan: 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); warna: #f1f1f1;}
    .pv-inner {kedudukan: relatif;z-index: -1;paparan: -webkit-box;paparan: kotak;lebar: 100%;tinggi: 100%;-webkit-transition: semua 350ms linear;-webkit-muka belakang -keterlihatan: tersembunyi;peralihan: semua 350ms linear;kebolehlihatan belakang: tersembunyi;-webkit-touch-callout: tiada;-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 -petak bual: tiada;kebolehlihatan belakang: tersembunyi;-gaya-transformasi-webkit: 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 : boleh dilihat;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility: hidden;-webkit-transform-style : awet-3d; }
    @-webkit-keyframes fadeIn{
        0%{opacity:0;}
        100%{opacity:1;}
    }
    @keyframes fadeIn{
        0%{opacity:0;}
        100%{opacity:100%;}
    }
    /*--------------------memuatkan----------------------*/
    .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;animasi: 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的一个例子：

    复制代码 代码如下:




              
               
                                                                                                                                                                                                                                                   
              


                
               
                                                                                                   ;(fungsi(){
    //Dapatkan elemen imej dalam html
                  var aImg=document.querySelectorAll("img"),
    aImgSrc=[];
    //Ikat acara klik pada imej
    untuk(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])
                           }lain{
    $(".conPic")[i].onload=function(){
                                 tambahTap(ini);
                                                                                                                                                                               }
                    }
    fungsi addTap(obj){
    $(obj).on("tap",function(){
    //Panggil ImageView
    ImageView($(obj)[0].index,aImgSrc);
                         })
                    }
                 })();
                                                                                                  



    Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya
    Label berkaitan：
    zepto.js 手机QQ空间 大图查看 ImageView.js
    Artikel sebelumnya：Pemahaman mendalam tentang siri JavaScript (28): Penjelasan terperinci tentang corak kilang corak reka bentuk_kemahiran javascript Artikel seterusnya：js untuk melaksanakan kemahiran seret lapisan seret modul iGoogleDivDrag effect_javascript
    Kenyataan Laman Web ini
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
    Artikel terbaru oleh pengarang
    Isu terkini
    javascript - masalah panggilan pemuatan modul binaan fis3, index.js tidak boleh memuatkan modul zepto.js, dan tiada penggera ralat.
    daripada 1970-01-01 08:00:00
    0
    0
    0
    javascript - Sila beritahu saya tentang masalah menukar fungsi panggil balik jq untuk menjanjikan pelaksanaan
    daripada 1970-01-01 08:00:00
    0
    0
    0
    javascript - Kekeliruan tentang menghantar parameter dalam tindak balas
    daripada 1970-01-01 08:00:00
    0
    0
    0
    javascript - gambar rajah tindanan atribut js
    daripada 1970-01-01 08:00:00
    0
    0
    0
    javascript - aplikasi halaman tunggal angularjs Bagaimana untuk menyelesaikan masalah tidak menatal ke bahagian atas halaman selepas halaman menatal ke bawah dan navigasi melompat ke halaman baharu?
    daripada 1970-01-01 08:00:00
    0
    0
    0
    Topik-topik yang berkaitan
    Lagi>
    Cadangan popular
    Tutorial Popular
    Lagi>
    Tutorial berkaitan
    Cadangan popular
    Kursus terkini
    Muat turun terkini
    Lagi>
    kesan web
    Kod sumber laman web
    Bahan laman web
    Templat hujung hadapan