【1】 Gunakan var untuk mendeklarasikan beberapa variabel, yang jauh lebih cepat daripada menggunakan var untuk setiap variabel
Salinan kode adalah sebagai berikut:
var sscrolltop = document.body.scrolltop || document.documentelement.scrolltop,
swindow_h = document.documentelement.clientHeight,
t_h = parseInt (this.getCss (this.getId ('gy_photobox_head'), 'height')),
hold_h = swindow_h - t_h - 20,
lebar = this.nimgwidth,
tinggi = this.nimgheight;
[2] Optimalisasi Acara DOM, saat window.onresised, tentukan timer dan setTimeout untuk mencegah sering terjadi panggilan
Salinan kode adalah sebagai berikut:
WindowResize: function () {
var _that = ini,
_timer = null;
// Fungsi throttling
window.onresize = function () {
clearTimeout (_timer);
_timer = setTimeout (function () {
if (_that.tools.getid ('gy_photobox')) {
_that.setboxcsss ();
}
}, 100);
}
}
【Tiga】 Fungsi pemrosesan pemuatan gambar
Salinan kode adalah sebagai berikut:
/*
@ src [string] alamat gambar
@ Success [fungsi] Fungsi panggilan balik untuk pemuatan gambar yang berhasil
@ error [fungsi] fungsi panggilan balik untuk pemuatan gambar yang gagal
*/
ImGloading: function (opt) {
var _img = gambar baru (),
_That = ini;
_img.onload = function () {
_that.nimgwidth = this.width;
_that.nimgheight = this.height;
if (typeof opt.success == 'function') {
setTimeout (function () {
opt.success ();
}, 300);
}
}
_img.onError = function () {
if (typeof opt.error) {
opt.Error ();
}
}
// Catatan: Itu harus ditempatkan di bawah acara Onload, jika tidak IE akan memiliki bug
_img.src = opt.src;
}
Kode Sumber:
Salinan kode adalah sebagai berikut:
/*
Penulis: Laoguoyong
*/
(fungsi(){
/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@ Parameter [string]
---------------------------------------
★ -segali pilihan berikut didukung- ★
@ Dukungan Selektor Tingkat Pertama: Seperti '#id', '. Kelas', 'P'
@ Dukungan Pilihan Keturunan, seperti '.class p', 'body span'
@ Dukungan Pemilihan Elemen Anak, seperti '.class> p', 'body> span'
----------------------------------------
@ return [array]
*/
var selector = function (str) {
// Tentukan serangkaian elemen
var elem = [];
/* Metode pribadi
---------------------*/
// Kembalikan elemen yaitu ID
fungsi _getId (id) {
return document.getElementById (id);
}
// Kembalikan elemen dengan elemen nama ini
function _getByClassName (className, Parent) {
var class_array = [],
node = parent! = tidak terdefinisi && parent.nodetype == 1? Parent.geteLementsbyTagname ('*'): document.geteLementsbyTagname ('*'),
reg = regexp baru ("(^| // s)"+className+"(// s | $)");
untuk (var n = 0, i = node.length; n <i; n ++) {
if (reg.test (node [n] .className)) {
class_array.push (node [n]);
}
}
return class_array;
}
// seleksi level 1, seperti '#id', 'p', '. Kelas'
// kembalikan [array]
fungsi _getDom {
var array_elem = [];
if (s.indexof ('#') == 0) {
array_elem.push (_getid (s.slice (1)));
}
lain jika (s.indexof ('.') == 0) {
array_elem = array_elem.concat (_getByClassName (s.slice (1)));
}
kalau tidak{
var tag = document.getElementsbyTagname (s);
untuk (var n = 0, i = tag.length; n <i; n ++) {
array_elem.push (tag [n]);
}
}
return array_elem;
}
/*
@arry_elm [array]: elemen array, seperti ['.demo', 'p'], pilih elemen p di bawah .demo. Mengenai apakah akan memilih keturunan atau keturunan, silakan lihat penjelasan parameter kedua
@R [String] - Opsional (default adalah memilih keturunan jika Anda tidak lulus): '>', adalah elemen memilih keturunan;
------------------------------------
@ return [array]
*/
fungsi _Query (array_elem, r) {
var node = array_elem,
type_name = node [0] .match (//#/)? 'Id _'+node [0] .slice (1): node [0] .match (//./)? 'ClassName _'+node [0] .slice (1): 'tagname _'+node [0],
anak = _getdom (node [1]),
type = type_name.split ('_'),
len = document.geteLementsbyTagname ('*'). Length,
reg = regexp baru ("(^| // s)"+type [1]+"(// s | $)") ;;
untuk (var i = 0, j = child.length; i <j; i ++) {
var par = anak [i] .parentnode;
untuk (var n = 0; n <len; n ++) {
if (par.nodetype == 9) {
merusak;
}
if (reg.test (par [type [0]])) {
elem.push (anak [i]);
merusak;
}kalau tidak{
if (r == '>') break;
par = par.parentnode;
}
}
}
}
/* Antarmuka
----------------------*/
var elemstr = str.replace (/(^/s+) | (/s+$)/, '');
if (document.queryselectorall) {
var dom = document.QuerySelectorAll (ELEMSTR);
untuk (var n = 0, len = dom.length; n <len; n ++) {
elem.push (dom [n]);
}
}kalau tidak{
var split =/media//s media/g.exec(elemstr);
if (split) {
var node = elemstr.split (split [0]);
_Query (node, split [0]);
}kalau tidak{
elem = elem.concat (_getdom (elemstr));
}
}
mengembalikan elem;
}
/* Konstruktor fungsi pop-up
----------------------*/
fungsi lgy_photobox (opsi) {
this.opt = opsi;
this.otarget = typeof option.target == 'objek'? option.target: selector (option.target);
if (! This.otarget) kembali;
this.nlen = this.otarget.length; // Jumlah total
this.abigimg_src = []; // Array Data Gambar Besar
this.atitle = []; // Judul Array Data
this.nindex = 0; //Indeks
this.nimgwidth = 0; // Secara dinamis mendapatkan lebar gambar
this.nimgheight = 0; // Secara dinamis dapatkan tinggi gambar
this.ndelay = 0.2;
this.intit ();
}
Lgy_photobox.prototype = {
intit: function () {
var _that = ini;
this.getData ();
untuk (var n = 0; n <this.nlen; n ++) {
this.otarget [n] .index = n;
this.otarget [n] .onClick = function (e) {
_that.createCover ();
var e = _that.tools.getevent (e),
target = _that.tools.getTarget (e);
// tidak ada bilah gulir muncul di halaman penelusuran pengaturan
_that.tools.setcss (document.documentElement, {'height': '100%', 'overflow-y': 'tersembunyi', 'overflow-x': 'tersembunyi'});
// Dapatkan indeks saat itu
_that.nindex = this.index;
// penilaian pertama
_that.firstload (_that.abigimg_src [_that.nindex], function () {
// Masukkan struktur
_that.createboxdom ();
//penutup
_that.tools.getid ('gy_photobox_close'). onclick = function () {
_that.removebox ();
}
// menilai tombol kiri dan kanan untuk ditampilkan
_that.btnisshow ();
// Sebelumnya
_that.btnprev ();
// Berikutnya
_that.btnnext ();
// Muat gambarnya
_that.imgchange (_that.abigimg_src [_that.nindex]);
});
// Setel ulang ukuran jendela
_that.windowResize ();
// acara keyboard
_that.keyevent ();
// Berhenti melompat
mengembalikan false;
}
}
},
createBoxDom: function () {
var doc = dokumen,
exhtml = '',
boxhtml = doc.createelement ('div');
boxhtml.id = 'gy_photobox';
doc.body.appendchild (boxhtml);
if (typeof this.opt.applhtml == 'string') {
exhTml = this.opt.applhtml;
}
boxhtml.innerhtml = '<div id = "gy_photobox_prev"> </div>'+
'<Div id = "gy_photobox_next"> </div>'+
'<span id = "gy_photobox_close"> </span>'+
'<Div id = "gy_photobox_head">'+exhtml+'</div>'+
'<Div id = "gy_photobox_main">'+
'<img id = "gy_photobox_img_loading" src = "http://www.pconline.com.cn/blank.gif"/>'+
'<img id = "gy_photobox_img" />'+
'<Div id = "gy_photobox_infor">'+
'<span id = "gy_photobox_num">'+
'<strong id = "gy_photobox_index"> </strong>'+
'/'+this.nlen+
'</span>'+
'<p id = "gy_photobox_title"> </p>'+
'</div>'+
'</div>';
},
createCover: function () {
// Buat overlay
var doc = dokumen,
coverHtml = doc.createelement ('div');
coverehtml.id = 'gy_photobox_cover';
doc.body.appendChild (coverehtml);
// Atur gaya lapisan overlay
this.tools.setcss (this.tools.getid ('gy_photobox_cover'), {'tinggi' :( doc.body.scrolltop || doc.documentelement.scrolltop)+(doc.documentelement.clientheight)+'px'});
},
setboxcss: function () {
var doc = dokumen,
nscrolltop = doc.body.scrolltop || doc.documentelement.scrolltop,
nwindow_h = doc.documentelement.clientHeight,
Ebox_head_h = this.tools.getid ('gy_photobox_head'). clientheight,
Ebox = this.tools.getid ('gy_photobox'),
Eboxpadding = 10,
hold_h = nwindow_h - eboxpadding - 50 - ebox_head_h,
lebar = this.nimgwidth,
tinggi = this.nimgheight;
// alert ('nwindow_h:'+nwindow_h+'-'+'eboxpadding:'+eboxpadding+'-'+'ebox_head_h:'+ebox_head_h);
// Ukuran gambar melebihi kisaran yang terlihat, zoom
if (this.nimgheight> hold_h) {
tinggi = hold_h,
width = math.ceil (this.nimgwidth*(height/this.nimgheight));
}
// Atur kotak yang berpusat di seluruh halaman
this.tools.setcss (eBox, {'width': width+'px',
'Tinggi': ebox_head_h + tinggi + 'px',
'margin-left' :-( Lebar+eboxpadding)/2+'px',
'Top': nscrolltop+(nwindow_h-height-eBoxpadding)/2+'px'});
this.tools.setcss (this.tools.getid ('gy_photobox_main'), {'width': width + 'px', 'height': height + 'px'});
// Atur gaya lapisan overlay
this.tools.setcss (this.tools.getid ('gy_photobox_cover'), {'tinggi': nscrolltop+doc.documentelement.clientHeight+'px'});
},
lepaskan kotak: function () {
var doc = dokumen;
if (this.tools.getid ('gy_photobox')) {
doc.body.removechild (this.tools.getid ('gy_photobox'));
}
if (this.tools.getid ('gy_photobox_cover')) {
document.body.removechild (this.tools.getid ('gy_photobox_cover'));
}
this.tools.setcss (document.documentElement, {'height': 'auto', 'overflow-y': 'auto', '_ overflow-y': 'gulir', 'overflow-x': 'auto'});
},
getData: function () {
untuk (var n = 0; n <this.nlen; n ++) {
var src = this.otarget [n] .getAttribute ('href'),
title = this.otarget [n] .getAttribute ('title');
this.abigimg_src.push (src);
if (! title) title = '';
this.atitle.push (judul);
}
},
btnisshow: function () {
this.tools.setcss (this.tools.getid ('gy_photobox_prev'), {'display': 'block'});
this.tools.setcss (this.tools.getid ('gy_photobox_next'), {'display': 'block'});
if (this.nindex == 0) this.tools.setcss (this.tools.getid ('gy_photobox_prev'), {'display': 'none'});
if (this.nindex == (this.nlen-1)) this.tools.setcss (this.tools.getid ('gy_photobox_next'), {'display': 'none'});
},
imgchange: function () {
var _that = ini,
_src = this.abigimg_src [this.nindex],
eloadingtips = this.tools.getid ('gy_photobox_img_loading'),
eimg = this.tools.getid ('gy_photobox_img'),
etitle = this.tools.getid ('gy_photobox_title'),
einfor = this.tools.getid ('gy_photobox_infor');
// tunjukkan gambar pemuatan
this.tools.setcss (eLoadingTips, {'display': 'block'});
this.tools.setcss (einfor, {'display': 'none'});
// menilai tombol kiri dan kanan untuk ditampilkan
this.btnisshow ();
// Pemrosesan pemuatan gambar
this.imgloading ({
'src': _ src,
'Success': function () {
_that.tools.setcss (eLoadingTips, {'display': 'none'});
_that.tools.setcss (einfor, {'display': 'block'});
// Atur jalur gambar asli, judul, nomor halaman saat ini
eimg.src = _src;
etitle.innerhtml = _that.atitle [_that.nindex];
_that.tools.getid ('gy_photobox_index'). innerHtml = (_that.nindex+1);
// Tetapkan gaya
_that.setboxcsss ();
// jendela pop-up muncul
_that.tools.setcss (_that.tools.getid ('gy_photobox'), {'visibilitas': 'visible'});
if (_that.tools.getid ('gy_photobox_firstload')) {
document.body.removechild (_that.tools.getid ('gy_photobox_firstload'));
}
// Fungsi panggilan balik dieksekusi setiap kali sakelar
if (typeof _that.opt.onchange == 'function') {
_that.opt.onchange ({'src': _ src, 'index': _ that.nindex, 'title': _ that.atitle [_that.nindex]});
}
},
'error': function () {
setTimeout (function () {
_that.tools.setcss (eLoadingTips, {'display': 'none'});
}, 200);
eimg.src = 'gyphotobox/error.png';
etitle.innerhtml = 'tidak ada gambar terkait';
_that.nimgwidth = 400;
_that.nimgheight = 300;
_that.setboxcsss ();
_that.tools.setcss (_that.tools.getid ('gy_photobox'), {'visibilitas': 'visible'});
if (_that.tools.getid ('gy_photobox_firstload')) {
document.body.removechild (_that.tools.getid ('gy_photobox_firstload'));
}
}
});
},
btnprev: function () {
var _that = ini;
this.tools.getid ('gy_photobox_prev'). onclick = function () {
_that.nindex--;
_that.imgchange ();
}
},
btnnext: function () {
var _that = ini;
this.tools.getid ('gy_photobox_next'). onclick = function () {
_that.nindex ++;
_that.imgchange ();
}
},
keyevent: function () {
var _that = ini;
document.onkeydown = function (e) {
var e = e || window.event;
switch (e.keycode) {
Kasus 37: {
if (_that.nindex! = 0 && _ that.tools.getid ('gy_photobox_prev')) {
_that.nindex--;
_that.imgchange ();
}
};merusak;
Kasus 39: {
if (_that.nindex! = (_that.nlen-1) && _ that.tools.getid ('gy_photobox_next')) {
_that.nindex ++;
_that.imgchange ();
}
};merusak;
Kasus 27: {
_that.removebox ();
};merusak;
}
}
},
/*
@ src [string] alamat gambar
@ Success [fungsi] Fungsi panggilan balik untuk pemuatan gambar yang berhasil
@ error [fungsi] fungsi panggilan balik untuk pemuatan gambar yang gagal
*/
ImGloading: function (opt) {
var _img = gambar baru (),
_That = ini;
_img.onload = function () {
_that.nimgwidth = this.width;
_that.nimgheight = this.height;
if (typeof opt.success == 'function') {
setTimeout (function () {
opt.success ();
}, 300);
}
}
_img.onError = function () {
if (typeof opt.error) {
opt.Error ();
}
}
// Catatan: Itu harus ditempatkan di bawah acara Onload, jika tidak IE akan memiliki bug
_img.src = opt.src;
},
FirstLoad: function (src, callback) {
var _that = ini,
html = document.createelement ('div');
html.id = 'gy_photobox_firstload';
Document.Body.AppendChild (HTML);
this.tools.setcss (this.tools.getid ('gy_photobox_firstload'), {'top' :( document.body.scrolltop || document.documentelement.scrolltop) +(document.documentelement.clientheight/2) +'px'});
if (typeOf callback == 'function') {
callback ();
}
},
WindowResize: function () {
var _that = ini,
_timer = null;
// Fungsi throttling
window.onresize = function () {
clearTimeout (_timer);
_timer = setTimeout (function () {
if (_that.tools.getid ('gy_photobox')) {
_that.setboxcsss ();
}
}, 100);
}
},
Tools: function () {
kembali{
getEvent: function (e) {
mengembalikan e || window.event;
},
getTarget: function (e) {
Return E.Target || E.Srcelement;
},
preventDefault: function (e) {
E.PreventDefault? E.PreventDefault (): E.ReturnValue = false;
},
getId: function (id) {
return document.getElementById (id);
},
getCss: function (node, value) {
return node.currentstyle? node.currentstyle [nilai]: getComputedstyle (node, null) [value];
},
setCss: function (node, val) {
untuk (var v in val) {
node.style.csStext += ';' +v +':' +val [v];
}
}
}
} ()
}
window.lgy_photobox = lgy_photobox;
}) ();
Rendering terakhir: