zepto.js_javascriptスキルをベースにした携帯電話のQQ空間を模した大型画像閲覧コンポーネント ImageView.jsの詳細説明

WBOY
リリース: 2016-05-16 16:11:13
オリジナル
1490 人が閲覧しました

呼び出しメソッド: ImageView(index,imgData) --index パラメータはデフォルトで画像に表示されるインデックス値、型は Number --imaData パラメータは画像 URL 配列、型は Array

zepto.js ファイルを使用する前に導入してください

ImageView.js の具体的なコードは次のとおりです:

コードをコピー コードは次のとおりです:

/*
* ImageView v1.0.0
* --zepto.js
に基づいた大きな画像の表示 * -- メソッド ImageView(index,imgDada)
を呼び出します * --index 画像デフォルト値表示インデックス、数値 --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 イベント={
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;
戻る
}
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
}その他{
_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;
                    _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 ") translation(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translation(" _zoomXY[0] "px," _zoomXY[1] "px)"});
                戻る
            }
            if (isDoubleZoom){
                戻る;
            }
            e = e.タッチ ? 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)&&(deltaY /= 3);
                _zoomXY[0] = デルタX;
                _zoomXY[1] = デルタY;
                (_length == 1 && newWidth < winW||newWidth < winW)&&(_zoomXY[0] = 0);
                (_length == 1 && newHeight < winH||newHeight < winH)&&(_zoomXY[1] = 0);
                $(img).css({"-webkit-transform": "scale(" _zoom ") translation(" _zoomXY[0]
                    "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translation(" _zoomXY[0]
                    "px," _zoomXY[1] "px)"})
            }その他{
                if (!isSlide) return;
                var deltaX = e.pageX - _start[0];
                (_transX > 0 || _transX < -winW * (_length - 1))&&(deltaX /= 4);
                _transX = -_index * winW デルタX;
                _this.find(".pv-inner").css({"-webkit-transform":"translate(" _transX "px,0px) translationZ(0)"});
            }
        }、
        touchend:function(e){
            if (isDoubleZoom) {
                戻る;
            }
            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) {
                        スケールダウン(img);
                        changeIndex(_index updateDelta);
                        戻る
                    }
                }
                var デルタ = Date.now() - _orgTime;
                if (デルタ                     (デルタ                     var deltaDis = Math.pow(180 / デルタ, 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 リニア","transition": "200ms リニア"});
                }
                if (borderX >= 0){
                    if (_zoomXY[0] < -borderX){
                        _zoomXY[0] = -borderX;
                    }else if (_zoomXY[0] > borderX){
                        _zoomXY[0] = 境界X;
                    }
                }
                if (borderY > 0){
                    if (_zoomXY[1] < -borderY){
                        _zoomXY[1] = -borderY;
                    }else if (_zoomXY[1] >borderY){
                        _zoomXY[1] = 境界Y;
                    }
                }
                if (Math.abs(_zoomXY[0]) <10) {
                    $(img).css({"-webkit-transform": "scale(" _zoom ") 変換(0px," _zoomXY[1] "px)","transform": "scale(" _zoom ") 変換(0px) ," _zoomXY[1] "px)"});
                    戻る
                } else{
                    $(img).css({"-webkit-transform": "scale(" _zoom ") translation(" _zoomXY[0] "px," _zoomXY[1] "px)","transform": "scale(" _zoom ") translation(" _zoomXY[0] "px," _zoomXY[1] "px)"});
                }
                isDrag = false
            }その他{
                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("不透明度","0");
            timer=setTimeout(function(){
                _this.css({"表示":""}).html("");
                unbind();
            },150)
        }、
        dobelTap:function(e){
            clearTimeout(タイマー);
            var now = 新しい日付;
            if (現在 - _lastTapDate < 500){
                戻る;
            }
            _lastTapDate = 今;
            var img = getImg();
            if (!img){
                戻る;
            }
            if (_zoom != 1){
                スケールダウン(img);
            }その他{
                スケールアップ(img);
            }
        }、
        setView:function(e){
            winW=window.innerWidth;
            winH=window.innerHeight;
            _this.width(window.innerWidth).height(window.innerHeight);
            translation((-_index*window.innerWidth),0,0,$(".pv-inner")[0]);
            スケールダウン(getImg())
        }
    };
    var handleEvent=function(e){
        スイッチ (e.type){
            ケース「タッチスタート」:
                Event.touchstart(e);
                休憩;
            ケース「タッチムーブ」:
                Event.touchmove(e);
                休憩;
            ケース「タッチキャンセル」:
            ケース「タッチエンド」:
                Event.touchend(e);
                休憩;
            case "方向変更":
            ケース "サイズ変更":
                Event.setView(e);
                休憩
        }
    };
    /**
* 結合イベント
​​*/
    varbind=function(){
        _this.on("シングルタップ",function(e){
            e.preventDefault();
            var now = 新しい日付;
            if (現在 - _lastTapDate < 500){
                戻る;           
            }
            _lastTapDate = 今;
            Event.click(e);
            false を返します;
        }).on("ダブルタップ", function(e) {
            e.preventDefault();
            Event.dobelTap(e);
            false を返します;
        });
        _this.on("タッチスタート タッチ移動 タッチエンド タッチキャンセル", function(e) {
            handleEvent(e);
        });
        Event.setView();
        ウィンドウの「onorientationchange」? window.addEventListener("方向変更",Event.setView,false) : window.addEventListener("resize",Event.setView,false);
    };
    /**
* * イベントを終了
​​*/
    var unbind= function() {
         _this.off();
        ウィンドウの「onorientationchange」? 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、
        スケール=w*h/(img.clientHeight*img.clientWidth);
        スケールを返します;
    };
    varscaleUp=function(img) {
        varscale = getScale(img);
        if (スケール > 1)
            $(img).css({"-webkit-transform": "scale(" スケール ")","transform": "scale(" スケール ")","-webkit-transition": "200ms","transition ": "200ms"});
        _zoom = スケール;
    };
    varscaleDown=function(img) {
        _ズーム = 1;
        _zoomXY = [0, 0];
        _doubleDistOrg = 1;
        _doubleZoomOrg = 1;
        $(img).css({"-webkit-transform": "scale(1)","transform": "scale(1)","-webkit-transition": "200ms","transition": "200ms "});
    };
    /**
* スライド効果
* 距離
​​*/
    var translation = 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);
    }();
    /**
    * * 拡大画像ビューリターンインターフェース関数
    * ImageView(インデックス,データ)
    * インデックスの初期インデックス値 numbermer
    * データ画像配列 array
    ​​*/
    var ImageView=function(インデックス,データ){
    _ImgData=データ;
    _index=index;
    _length=data.length;
    //dom構造を作成
    Create();
    //dom構造表示
    _this.css("表示","ブロック");
    //イベントをバインド
    bind();
    }
    ImageView を返します;
    })(ウィンドウ,ゼプト);

    ImageView.js で使用される CSS コードは次のとおりです:

    コードをコピー コードは次のとおりです:

    /*大图查看*/
    .slide-view {背景: #000;位置: 固定;幅: 100%;高さ: 100%;オーバーフロー: 非表示;上: 0;左: 0;Z インデックス: 100;不透明度: 0;表示: なし; -webkit-animation:fadeIn .2s リニア フォワード;アニメーション:fadeIn .2s リニア フォワード;-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);色: #f1f1f1;}
    .pv-inner {位置: 相対;z-index: -1;表示: -webkit-box;表示: ボックス;幅: 100%;高さ: 100%;-webkit-transition: すべて 350 ミリ秒線形;-webkit-backface -可視性: 非表示;トランジション: すべて 350 ミリ秒のリニア;背面の可視性: 非表示;-webkit-touch-callout: なし;-webkit-transform-style: 3d を保持; }
    .pv-inner li {text-align: center;display: -webkit-box;display: box;-webkit-box-align: center;overflow: hidden;width: 100%;height: 100%;-webkit-touch -コールアウト: なし;背面の可視性:非表示;-webkit-transform-style:preserve-3d; }
    .pv-inner img {最大幅: 97%;最大高さ: 100%;-webkit-transform: スケール(1) 変換(0px,0px);変換: スケール(1) 変換(0px,0px);可視性: 表示;-webkit-transition: 200ms;transition: 200ms;-webkit-user-select: none;user-select: none;display: block;margin: 0 auto;backface-visibility: hidden;-webkit-transform-style : 保存-3d; }
    @-webkit-keyframes フェードイン{
        0%{不透明度:0;}
        100%{不透明度:1;}
    }
    @keyframes フェードイン{
        0%{不透明度:0;}
        100%{不透明度:100%;}
    }
    /*---------------------読み込み中---------------*/
    .ui-loading {position: 絶対;left: 50%;top: 50%;display: none;vertical-align: middle;font: 0/0 arial;margin: -5px 0 0 -10px;}
    .ui-loading i {表示: インラインブロック;幅: 5px;高さ: 12px;背景: #fff;vertical-align: トップ;-webkit-animation: ローディング-スピン 1 秒無限リニア;アニメーション: ローディング-スピン 1 秒無限線形;}
    .ui-loading i {-webkit-animation: ローディング-スピン 1 秒の無限リニア;アニメーション: ローディング-スピン 1 秒の無限リニア}
    .ui-loading i.t2 {マージン: 0 3px;-webkit-アニメーション名:loading-spin-one;アニメーション名:loading-spin-one}
    .ui-loading i.t3 {-webkit-animation-name:loading-spin-two;animation-name:loading-spin-two}
    @-webkit-keyframes ローディングスピン {
        0% {不透明度: 0}
        30% {不透明度: 1;-webkit-transform:scale(1,1.2)}
        60% {不透明度: 0;-webkit-transform:scale(1)}
        100% {不透明度: 0}
    }
    @-webkit-keyframesloading-spin-one {
        0% {不透明度: 0}
        20% {不透明度: 0}
        50% {不透明度: 1;-webkit-transform:scale(1,1.2)}
        80% {不透明度: 0;-webkit-transform:scale(1)}
        100% {不透明度: 0}
    }
    @-webkit-keyframesloading-spin-two {
        0% {不透明度: 0}
        40% {不透明度: 0}
        70% {不透明度: 1;-webkit-transform:scale(1,1.2)}
        100% {不透明度: 0;-webkit-transform:scale(1)}
    }
    @keyframes ローディングスピン {
        0% {不透明度: 0}
        30% {不透明度: 1;変換: スケール(1,1.2)}
        60% {不透明度: 0;変換: スケール(1)}
        100% {不透明度: 0}
    }
    @keyframes ロードスピンワン {
        0% {不透明度: 0}
        20% {不透明度: 0}
        50% {不透明度: 1;変換: スケール(1,1.2)}
        80% {不透明度: 0;変換: スケール(1)}
        100% {不透明度: 0}
    }
    @keyframes ローディングスピンツー {
        0% {不透明度: 0}
        40% {不透明度: 0}
        70% {不透明度: 1;変換: スケール(1,1.2)}
        100% {不透明度: 0;変換: スケール(1)}
    }
    /*---------------------読み込み終了----------------------*/

    ps:代価機能は非常に単純なので、多くの問題が発生する可能性があります。しかし、頑張って使用することもできます。

    以下はImageView.jsを使用する例です:

    复制代码代码如下:



    <頭>


                                                                                         





                                                                                            ;(関数(){
    //htmlの画像要素を取得
    var aImg=document.querySelectorAll("img"),
    aImgSrc=[];
    //クリックイベントを画像にバインドします
    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 If($(".conPic")[i].complete){
    addTap($(".conPic")[i])
    }else{
    $(".conPic")[i].onload=function(){
    addTap(this);
    } }
    }
    関数 addTap(obj){
    $(obj).on("タップ",function(){
    //ImageView
    を呼び出します ImageView($(obj)[0].index,aImgSrc);
    })
    }
    })();
                                                                                             



    上記がこの記事の全内容です。皆さんに気に入っていただければ幸いです
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!