Metode Panggilan: ImageView (indeks, imgdata) --Index Parameter adalah nilai indeks yang ditampilkan oleh gambar default, tipe adalah angka --imadata parameter adalah array URL gambar, tipe array
Sebelum menggunakannya, Anda harus terlebih dahulu mengimpor file Zepto.js
Kode spesifik imageview.js adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
/*
* Imageview v1.0.0
* -Big Image Berdasarkan Zepto.js
* --CALLING METODE ImageView (Index, IMGDADA)
* --Index Gambar Nilai Default Indeks Tampilan, Number --ImgData Picture 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;
/**
* Acara objek acara
*/
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;
Kembali
}
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
}kalau tidak{
_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"})
} lain jika (_zoom> getscale (img) * 2) {
_zoom = getscale (img) * 2;
}
$ (img) .css ({"-webkit-transform": "skala (" + _zoom + ") terjemahan (" + _zoomxy [0] + "px," + _zoomxy [1] + "PX)", "Transform": "Skala (" + _Zoom + ") Translate (" + _zoom) [0] + _zoom (" + _zoom +") (" + _zoom (" + _zoom (" + _zoom (" + _zoom + ") (" + _zoom (" + _zooom (" + _zoom (" + _zoom (" + "px)"});
Kembali
}
if (isDoubleZoom) {
kembali;
}
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]> perbatasan) && (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": "skala (" + _zoom + ") translate (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)", "transform": "skala (" + _zoom + ") translate (" + _zoomxy [0] +
"px," + _zoomxy [1] + "px)"})
}kalau tidak{
if (! isSlide) kembali;
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) {
kembali;
}
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) {
Diperbaruitelta = 1;
} else if (_zoomXy [0]> borderx + switchdelta / _zoom && _index> 0) {
updateDelta = -1;
}
if (updateDelta! = 0) {
scaledown (img);
ChangeIndex (_Index + updateDelta);
Kembali
}
}
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 Cubic-Bezier (0,08,0,65,0,79,1)", "Transisi": "400ms Cubic-Bezier (0,08,0,65,0,79,1)"}))
} kalau tidak{
$ (img) .css ({"-webkit-transition": "200ms linear", "transition": "200ms linear"});
}
if (borderx> = 0) {
if (_zoomxy [0] <-borderx) {
_ZoomXy [0] = -borderx;
} lain jika (_zoomxy [0]> borderx) {
_zoomxy [0] = borderx;
}
}
if (perbatasan> 0) {
if (_zoomxy [1] <-bordery) {
_ZoomXy [1] = -Bordery;
} lain jika (_zoomxy [1]> perbatasan) {
_ZoomXy [1] = perbatasan;
}
}
if (math.abs (_zoomxy [0]) <10) {
$ (img) .css ({"-webkit-transform": "skala (" + _zoom + ") terjemahan (0px," + _zoomxy [1] + "px)", "transform": "skala (" + _zoom + ") translate (0px," + _zoomxy [1] + ") (0px," + _zoomxy [1] + ") (0px) (0px," + _zoomxy [1] + ") (0px," + _zoomxy [1] + ")
Kembali
} kalau tidak{
$ (img) .css ({"-webkit-transform": "skala (" + _zoom + ") terjemahan (" + _zoomxy [0] + "px," + _zoomxy [1] + "PX)", "Transform": "Skala (" + _Zoom + ") Translate (" + _zoom) [0] + _zoom (" + _zoom +") (" + _zoom (" + _zoom (" + _zoom (" + _zoom + ") (" + _zoom (" + _zooom (" + _zoom (" + _zoom (" + "px)"});
}
isDrag = false
}kalau tidak{
if (! isSlide) {return;}
var deltax = _transx - -_index * winw;
var updateDelta = 0;
if (deltax> 50) {
updateDelta = -1;
} lain if (deltax <-50) {
Diperbaruitelta = 1;
}
_index = _index+updateDelta;
ChangeIndex (_index);
isslide = false
}
},
Klik: function (e) {
_zoom = 1;
_ZoomXy = [0,0];
_this.css ("opacity", "0");
timer = setTimeout (function () {
_this.css ({"display": ""}). html ("");
memperlonggar();
}, 150)
},
Dobeltap: function (e) {
ClearTimeout (timer);
var sekarang = tanggal baru;
if (sekarang - _lasttapDate <500) {
kembali;
}
_lasttapDate = sekarang;
var img = getImg ();
if (! img) {
kembali;
}
if (_zoom! = 1) {
scaledown (img);
}kalau tidak{
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) {
sakelar (e.type) {
kasus "touchstart":
Event.touchstart (e);
merusak;
Kasus "TouchMove":
Event.touchmove (e);
merusak;
Kasus "TouchCancel":
Kasus "Touchend":
Event.touchend (e);
merusak;
kasus "orientationchange":
kasus "mengubah ukuran":
Event.setView (e);
merusak
}
};
/**
* Acara yang mengikat
*/
var bind = function () {
_this.on ("singletap", function (e) {
e.preventdefault ();
var sekarang = tanggal baru;
if (sekarang - _lasttapDate <500) {
kembali;
}
_lasttapDate = sekarang;
Event.click (e);
mengembalikan false;
}). on ("doubleTap", function (e) {
e.preventdefault ();
Event.dobeltap (e);
mengembalikan false;
});
_this.on ("TouchStart TouchMove Touchend TouchCancel", Function (e) {
handleevent (e);
});
Event.setView ();
"OnorientationChange" di jendela? window.addeventListener ("orientationchange", event.setView, false): window.addeventListener ("mengubah ukuran", event.setView, false);
};
/**
* Acara rilis
*/
var unbind = function () {
_this.off ();
"OnorientationChange" di jendela? window.removeeventlistener ("orientationchange", event.setView, false): window.removeeventlistener ("ubah ukuran", event.setView, false)
};
var getDist = function (x1, y1, x2, y2) {
return math.sqrt (math.pow (x2 - x1, 2) + math.pow (y2 - y1, 2), 2)
}
/**
* Zoom gambar
*/
var getscale = function (img) {
var h = img.naturalheight, w = img.naturalwidth,
Skala = w*h/(img.clientHeight*img.clientwidth);
skala pengembalian;
};
var scaleup = function (img) {
var skala = getscale (img);
if (skala> 1)
$ (img) .css ({"-WebKit-Transform": "Scale (" + Scale + ")", "Transform": "Scale (" + Scale + ")", "-Webkit-Transition": "200ms", "Transition": "200ms"});
_zoom = skala;
};
var scaledown = function (img) {
_zoom = 1;
_ZoomXy = [0, 0];
_Doubledistorg = 1;
_doublezoomorg = 1;
$ (img) .css ({"-WebKit-Transform": "Skala (1)", "Transform": "Scale (1)", "-Webkit-Transition": "200ms", "Transition": "200ms"});
};
/**
* Efek geser
* Dist
*/
var translate = function (distrx, 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 (' + disx + 'px,' + disty + 'px)' + 'translatez (0)';
ELE.MSTRANSFORM = ELE.MOZTRANSFORM = ELE.OtRANSform = 'translatex (' + disx + 'px) translateY (' + Disty + 'px)';
};
/**
* Ubah indeks value_index
*/
var changeIndex = function (index, force) {
if (index <0) {
indeks = 0;
} lain jika (index> = _length) {
index = _length - 1;
}
_index = index;
translate ((-_ index*window.innerwidth), 0, force? "0": "200", $ (". PV-INNER") [0]);
$ ("#J_index"). Html (_index+1+"/"+_ panjang);
imGload ();
}
/**
* Akuisisi gambar
*/
var getimg = function (index) {
var img = _this.find ("li"). eq (index || _index) .find ("img");
if (img.size () == 1) {
kembalikan img [0];
}kalau tidak{
Kembalikan NULL
}
}
/**
* Memuat gambar
*/
var imgload = function () {
if ($ (". pv-img"). eq (_index) .find ("img") [0]) {
$ ("#J_loading"). Css ("display", "");
kembali;
}kalau tidak{
$ ("#J_loading"). CSS ("display", "block");
var tempimg = gambar baru (), w, h, set;
tempimg.src = _imgdata [_index];
$ (". PV-IMG"). EQ (_index) [0] .AppendChild (Tempimg);
tempimg.onload = function () {
$ ("#J_loading"). Css ("display", "");
}
}
};
/**
* Buat gambar besar untuk melihat struktur kubah
*/
var create = function () {
_this.append ("<span class = 'pv-inner'> </ul>"). append ("<p class = 'counts'> <span class = 'value' id = 'j_index'>"+(_ index+1)+"/"+_ length+"</span> </p>"). Tambahkan ("ID =" ID = 'I = ID = ID = ID = ID = ID = ID = ID = ID = ID (" class = 't1'> </i> <i class = 't2'> </i> <i class = 't3'> </i> </span> ")
untuk (var i = 0; i <_length; i ++) {
$ (". PV-INNER"). Append ("<li class = 'pv-img'> </li>")
}
imGload ();
};
/**
* Gambar besar untuk melihat inisialisasi
*/
var init = function () {
!! _ ini [0] || $ ("body"). append ("<div class = 'slide-view' id = 'slideview'> </div>");
_this = $ ("#slideview");
($ .os.iphone || $ .os.android && parsefloat ($. OS.Version)> = 4) && (_ AdvancedSupport = true);
} ();
/**
* Lihat fungsi antarmuka pengembalian dalam gambar besar
* ImageView (indeks, data)
* indeks nilai indeks awal nubmer
* Array Array Gambar Data
*/
var imageview = function (index, data) {
_Imgdata = data;
_index = index;
_length = data.length;
// Buat struktur DOM
Membuat();
// Tampilan Struktur Dom
_this.css ("display", "block");
// acara yang mengikat
mengikat();
}
Return ImageView;
}) (jendela, zepto);
Kode CSS yang digunakan oleh ImageView.js adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
/*Tampilan gambar besar*/
.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: none; -webkit-transform-style: preserve-3d; }
.slide-view .counts {position: absolute; 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; tampilan: inline-block; latar belakang-warna: rgba (102,102,102, .6); warna: #f1f1f1f1;}
.pv-inner {position: relative;z-index: -1;display: -webkit-box;display: box;width: 100%;height: 100%;-webkit-transition: all 350ms linear;-webkit-backface-visibility: hidden;transition: all 350ms linear;backface-visibility: hidden;-webkit-touch-callout: none; -webkit-transform-style: preserve-3d; }
.pv-inner li {text-align: center; display: -webkit-box; display: box; -webkit-box-align: center; overflow: hidden; lebar: 100%; tinggi: 100%;-webkit-touch-callout: tidak ada; non-visibilitas: hidden; -webkitform-transform-style: non-visibility; hidden; -webkitform-style-style: non-visibilitas; }
.pv-inner img {max-width: 97%; max-height: 100%;-Webkit-transform: skala (1) translate (0px, 0px); transabilitas: skala (1) translate (0px, 0px); visibilitas: visible; -webkit-transisi: none; non-none; non-none; non-no-clect: none-select: none-no-celect: none none; non-celect: none none; non-celect: none-select: none none; none-select: none-none; none-select: none none blok; margin: 0 auto; backface-visibilitas: tersembunyi; -webkit-transform-style: preserve-3d; }
@-webkit-keyframe fadein {
0%{opacity: 0;}
100%{opacity: 1;}
}
@keyframes fadein {
0%{opacity: 0;}
100%{opacity: 100%;}
}
/*--------------------memuat-----------------------*/
.ui -loading {position: absolute; kiri: 50%; atas: 50%; tampilan: tidak ada; vertikal -align: tengah; font: 0/0 arial; margin: -5px 0 0 -10px;}
.ui-loading i {display: inline-block; lebar: 5px; tinggi: 12px; latar belakang: #ffff; vertikal-align: top; -webkit-animasi: pemuatan linier tak terbatas; animasi: loading-spin 1s tak terbatas;}
.ui-loading i {-webkit-animation: Loading-spin 1s Infinite linear; Animasi: 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; animasi-nama: Loading-spin-two}
@-webkit-keyframe memuat-spin {
0% {opacity: 0}
30% {opacity: 1; -webkit-transform: skala (1,1.2)}
60% {opacity: 0; -webkit-transform: skala (1)}
100% {opacity: 0}
}
@-webkit-keyframe memuat-spin-one {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1; -webkit-transform: skala (1,1.2)}
80% {opacity: 0; -webkit-transform: skala (1)}
100% {opacity: 0}
}
@-webkit-keyframe memuat-spin-two {
0% {opacity: 0}
40% {opacity: 0}
70% {opacity: 1; -webkit-transform: skala (1,1.2)}
100% {opacity: 0; -webkit-transform: skala (1)}
}
@keyframes memuat spin {
0% {opacity: 0}
30% {opacity: 1; transform: skala (1,1.2)}
60% {opacity: 0; transform: skala (1)}
100% {opacity: 0}
}
@keyframes memuat-spin-one {
0% {opacity: 0}
20% {opacity: 0}
50% {opacity: 1; transform: skala (1,1.2)}
80% {opacity: 0; transform: skala (1)}
100% {opacity: 0}
}
@keyframes memuat-spin-two {
0% {opacity: 0}
40% {opacity: 0}
70% {opacity: 1; transform: skala (1,1.2)}
100% {opacity: 0; transform: skala (1)}
}
/*-------------------- Loading-end ----------------------*//
PS: Fungsi kode relatif sederhana dan mungkin ada banyak masalah. Tapi hampir tidak bisa digunakan
Berikut ini adalah contoh menggunakan ImageView.js:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = perangkat-lebar, skala awal = 1.0, skala minimum = 1.0, skala maksimum = 1.0, skala pengguna = tidak">
<Title> Tampilan Gambar Besar Seluler </iteme>
<script type = "text/javascript" src = "test_files/zepto.min.js">/script>
<type script = "text/javascript" src = "test_files/imageview.js">/script>
</head>
<body>
<!-Di atas adalah struktur halaman HTML->
<!-Berikut ini adalah contoh penggunaan Imageview->
<script>
;(fungsi(){
// Dapatkan elemen gambar di HTML
var Aimg = document.queryselectorall ("img"),
AIMGSRC = [];
// ikat acara klik untuk gambar
untuk (var i = 0, l = Aimg.length; i <l; i ++) {
AIMG [i] .index = i;
AIMG [i] .className+= "conpic";
AIMGSRC.PUSH (AIMG [I] .SRC);
}
untuk (var i = 0; i <$ (". CONPIC"). Panjang; i ++) {
if ($ (". conpic") [i] .complete) {
addtap ($ (". Conpic") [i])
}kalau tidak{
$ (". CONPIC") [i] .onload = function () {
addtap (ini);
}
}
}
fungsi addtap (obj) {
$ (obj) .on ("tap", function () {
// Memanggil Imageview
ImageView ($ (OBJ) [0] .Index, AIMGSRC);
})
}
}) ();
</script>
</body>
Di atas adalah seluruh konten artikel ini. Saya harap Anda menyukainya