呼び出し方法：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>
上記は、この記事のコンテンツ全体です。気に入っていただければ幸いです