呼び出し方法:ImageView(index、IMGData) - インデックスパラメーターはデフォルトの画像によって表示されるインデックス値、タイプは数字です-imadataパラメーターは画像URL配列、タイプは配列です
使用する前に、最初にzepto.jsファイルをインポートする必要があります
ImageView.jsの特定のコードは次のとおりです。
コードコピーは次のとおりです。
/*
* ImageView v1.0.0
* - Zepto.jsに基づくビッグ画像
* - コールメソッドImageView(index、imgdada)
* -index画像デフォルト値ディスプレイインデックス、number-imgdata画像URL配列、配列
* */
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;
/**
*イベントオブジェクトイベント
*/
var event = {
Touchstart:function(e){
E.PreventDefault();
if(_advandsupport && 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(_advandsupport && 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 + ")翻訳(" + _zoomxy [0] + "px、" + _zoomxy [1] + "px) + "px)"});
戻る
}
if(isdoublezoom){
戻る;
}
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 + ")翻訳(" + _zoomxy [0] +
「Px」、 " + _zoomxy [1] +" px) "、" transform ":" scale( " + _zoom +")翻訳( " + _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 + deltax;
_this.find( "。pv-inner")。css({"-webkit-transform": "translate(" + _transx + "px、0px)translatez(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){
Scaledown(IMG);
changeindex(_index + updatedelta);
戻る
}
}
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).css({" - webkit-transition": "400msキュービックベジエ(0.08,0.65,0.79,1)"、 "遷移": "400ms cubic-bezier(0.08,0.65,0.79,1)"})
} それ以外{
$(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 + ")翻訳(0px、" + _zoomxy [1] + "px)、" transform ":" scale( " + _zoom +")翻訳(0px、 " + _zoomxy [1] +" px) "};
戻る
} それ以外{
$(img).css({" - webkit-transform": "scale(" + _zoom + ")翻訳(" + _zoomxy [0] + "px、" + _zoomxy [1] + "px) + "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
}
}、
クリック:function(e){
_Zoom = 1;
_zoomxy = [0,0];
_this.css( "Opacity"、 "0");
Timer = setimeout(function(){
_this.css({"display": ""})。html( "");
unbind();
}、150)
}、
dobeltap:function(e){
ClearTimeout(タイマー);
var now = new Date;
if(今 -_lasttapdate <500){
戻る;
}
_lasttapdate = now;
var img = getimg();
if(!img){
戻る;
}
if(_zoom!= 1){
Scaledown(IMG);
}それ以外{
ScaleUp(IMG);
}
}、
setView:function(e){
winw = window.innerwidth;
winh = window.innerheight;
_this.width(window.innerwidth).height(window.innerheight);
翻訳((-_ index*window.innerwidth)、0,0、$( "。pv-inner")[0]);
Scaledown(getimg())
}
};
var handleevent = function(e){
switch(e.type){
ケース「TouchStart」:
event.touchstart(e);
壊す;
ケース「TouchMove」:
event.touchmove(e);
壊す;
ケース「TouchCancel」:
ケース「タッチエンド」:
event.touchend(e);
壊す;
ケース「OrientationChange」:
ケース「サイズ」:
event.setView(e);
壊す
}
};
/**
*バインディングイベント
*/
var bind = function(){
_this.on( "singletap"、function(e){
E.PreventDefault();
var now = new Date;
if(今 -_lasttapdate <500){
戻る;
}
_lasttapdate = now;
event.click(e);
falseを返します。
})。on( "doubletap"、function(e){
E.PreventDefault();
event.dobeltap(e);
falseを返します。
});
_this.on( "touchstart touchmove touchend touchcancel"、function(e){
handleEvent(e);
});
event.setView();
ウィンドウの「OnorientationChange」? window.addeventlistener( "OrientationChange"、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);
返品スケール。
};
var scaleup = function(img){
var scale = getScale(IMG);
if(スケール> 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 value_indexを変更します
*/
var changeindex = function(index、force){
if(index <0){
index = 0;
} else if(index> = _length){
index = _length -1;
}
_index = index;
翻訳((-_ 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){
IMG [0]を返します。
}それ以外{
nullを返します
}
}
/**
*画像の読み込み
*/
var imgload = function(){
if($( "。pv-img")。eq(_index).find( "img")[0]){
$( "#j_loading")。css( "display"、 "");
戻る;
}それ以外{
$( "#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"、 "");
}
}
};
/**
*ドーム構造を表示する大きな画像を作成する
*/
var create = function(){
_tis.Append( "<span class = 'pv-inner'> </ul>") class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
for(var i = 0; i <_length; i ++){
$( "。pv-inner")。
}
imgload();
};
/**
*初期化を表示する大きな画像
*/
var init = function(){
!! this [0] || $( "body")。append( "<div class = 'slide-view' id = 'slideview'> </div>");
_this = $( "#slideview");
($ .os.iphone || $ .os.android && parsefloat($。os.version)> = 4)&&(_ advancedsupport = true);
}();
/**
*大きな画像で戻りインターフェイス関数を表示します
* ImageView(インデックス、データ)
*インデックス初期インデックス値nubmer
*データ画像配列アレイ
*/
var imageview = function(index、data){
_imgdata = data;
_index = index;
_length = data.length;
// DOM構造を作成します
作成する();
// DOM構造ディスプレイ
_this.css( "display"、 "block");
//バインディングイベント
バインド();
}
ImageViewを返します。
})(window、zepto);
ImageView.jsで使用されるCSSコードは次のとおりです。
コードコピーは次のとおりです。
/*大画像ビュー*/
.slide-view {background:#000; position:sixt; width:100%; height:height:100%; hidden:hidden; top:0; left:0; z-index:100; ofacity:0; display:none; -webkit-animation:fadein .2s線形前方;なし; -webkit-transform-style:preserve-3d; }
.slide-view .counts {position:aspolute; 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); coler:f1f1f1;}
.pv-inner {position:relative; z-index:-1; display:-webkit-box; display:box; width:100%; height:100%; - webkit-transition:すべて350ms線形; -webkit-back-visibility:hidden; transition:all 350ms linear;なし; -webkit-transform-style:preserve-3d; }
.pv-inner li {text-align:center; display; display:-webkit-box; display:box; -webkit-box-align:center:hidden; width:100%; height:100%; - webkit-touch-callout:none; backface-visibility:hidden; -webkit-transform-style:perseve-3d; }
.pv-inner img {max-width:97%; max-height:100%; - webkit-transform:scale(1)translate(0px、0px); transability:scale(1)translate(0px、0px); visibility:visible; visible; -webkit-transition:200ms; -webkit-user-seer-serect-userect:なし;ディスプレイ:ブロック;マージン:0 auto; backface-visibility:hidden; -webkit-transform-style:preserve-3d; }
@-webkit-keyframes fadein {
0%{不透明:0;}
100%{不透明:1;}
}
@KeyFrames Fadein {
0%{不透明:0;}
100%{不透明:100%;}
}
/*--------------------ロード--------------------------------------------------------------------------------------
.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:#ffff; 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ロードスピン{
0%{不透明:0}
30%{不透明:1; -webkit-transform:スケール(1,1.2)}
60%{不透明:0; -webkit-transform:スケール(1)}
100%{不透明:0}
}
@-webkit-keyframes loading-spin-one {
0%{不透明:0}
20%{不透明:0}
50%{不透明:1; -webkit-transform:スケール(1,1.2)}
80%{不透明:0; -webkit-transform:スケール(1)}
100%{不透明:0}
}
@-webkit-keyframesロードスピンツー{
0%{不透明:0}
40%{不透明:0}
70%{不透明:1; -webkit-transform:スケール(1,1.2)}
100%{不透明:0; -webkit-transform:スケール(1)}
}
@KeyFramesロードスピン{
0%{不透明:0}
30%{不透明:1;変換:スケール(1,1.2)}
60%{不透明:0;変換:スケール(1)}
100%{不透明:0}
}
@KeyFrames Loading-Spin-One {
0%{不透明:0}
20%{不透明:0}
50%{不透明:1;変換:スケール(1,1.2)}
80%{不透明:0;変換:スケール(1)}
100%{不透明:0}
}
@KeyFrames Loading-Spin-Two {
0%{不透明:0}
40%{不透明:0}
70%{不透明:1;変換:スケール(1,1.2)}
100%{不透明:0;変換:スケール(1)}
}
/*--------------------ロードエンド-------------------------*/
PS:コード関数は比較的単純で、多くの問題がある可能性があります。しかし、それはかろうじて使用できます
以下は、imageview.jsを使用する例です。
コードコピーは次のとおりです。
<!doctype html>
<html>
<head>
<メタcharset = "utf-8">
<meta name = "Viewport" content = "width = device-width、initial-scale = 1.0、minimut-scale = 1.0、maximing-scale = 1.0、user-scalable = no">
<Title>モバイル大型画像ビュー</title>
<script type = "text/javascript" src = "test_files/zepto.min.js">/script>
<script type = "text/javascript" src = "test_files/imageview.js">/script>
</head>
<body>
<! - 上記はHTMLページ構造 - >です
<! - 以下はImageViewの使用の例です - >
<スクリプト>
;(関数(){
// HTMLで画像要素を取得します
var aimg = document.queryselectorall( "img")、
aimgsrc = [];
//画像のクリックイベントをバインドします
for(var i = 0、l = aimg.length; i <l; i ++){
aimg [i] .index = i;
aimg [i] .classname+= "conpic";
aimgsrc.push(aimg [i] .src);
}
for(var i = 0; i <$( "。conpic")。長さ; i ++){
if($( "。conpic")[i] .complete){
addtap($( "。コンピック")[i])
}それ以外{
$( "。コンピック")[i] .onload = function(){
addtap(this);
}
}
}
function addtap(obj){
$(obj).on( "tap"、function(){
// ImageViewを呼び出します
ImageView($(obj)[0] .index、aimgsrc);
})
}
})();
</script>
</body>
上記は、この記事のコンテンツ全体です。気に入っていただければ幸いです