【1】 Verwenden Sie var, um mehrere Variablen zu deklarieren, was viel schneller ist als Var für jede Variable
Die Codekopie lautet wie folgt:
var sscrolltop = document.body.scrolltop || document.documentElement.scrolltop,
swindow_h = document.documentElement.clientHeight,
t_h = parseInt (this.getCSS (this.getId ('gy_photobox_head'), 'Höhe')),
hold_h = swindow_h - t_h - 20,
width = this.nimgwidth,,
Höhe = this.nimgheight;
[2] DOM -Ereignisoptimierung, wenn window.onResize einen Timer und SetTimeout definieren, um häufige Anrufe zu verhindern
Die Codekopie lautet wie folgt:
windowResize: function () {
var _that = this,,
_timer = null;
// Funktionsdrosselung
window.onResize = function () {
Clearimeout (_timer);
_timer = setTimeout (function () {
if (_that.tools.getId ('gy_photobox')) {
_that.setboxcss ();
}
}, 100);
}
}
【Drei】 Bildladeverarbeitungsfunktion
Die Codekopie lautet wie folgt:
/*
@ src [String] Bildadresse
@ Erfolg [Funktion] Rückruffunktion für ein erfolgreiches Bildladen
@ Fehler [Funktion] Rückruffunktion für fehlgeschlagenes Bildladen
*/
Imgloading: Funktion (opt) {
var _img = new Image (),
_that = this;
_img.onload = function () {
_that.nimgwidth = this.width;
_that.nimgHeight = this.height;
if (typeof opt.success == 'Funktion') {
setTimeout (function () {
opt.success ();
}, 300);
}
}
_img.onerror = function () {
if (typeof opt.Error) {
opt.Error ();
}
}
// Hinweis: Es sollte unter das Onload -Ereignis platziert werden, sonst hat der IE einen Fehler
_img.src = opt.src;
}
Quellcode:
Die Codekopie lautet wie folgt:
/*
Autor: Laoguoyong
*/
(Funktion(){
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@ Parameter [String]
-----------------------------------
★-Nur die folgenden Auswahlen werden unterstützt-★
@ Support Erststufe Selektoren: wie '#ID', '. Klasse', 'P'
@ Support Descendant Auswahl, wie z.
@ Support Child Element Auswahl, wie z. B. '.class> p', 'Body> Span' '
----------------------------------------
@ return [Array]
*/
var selector = function (str) {
// eine Reihe von Elementen definieren
var elem = [];
/* Private Methode
----------------------*///
// Rückgabeelement, das id ist
Funktion _getId (id) {
return document.getElementById (id);
}
// Gibt das Element mit diesem Namenselement zurück
Funktion _getByClassName (ClassName, Parent) {
var class_array = [],
node = übergeordnet!
reg = new regexp ("(^| // s)"+className+"(// s | $)");
für (var n = 0, i = node.length; n <i; n ++) {
if (reg.test (node [n] .className)) {
class_array.push (node [n]);
}
}
return class_array;
}
// Auswahl der Stufe 1 wie '#ID', 'P', '. Klasse' '
// return [Array]
Funktion _getdom (s) {
var array_elem = [];
if (S.Indexof ('#') == 0) {
array_elem.push (_getId (slice (1)));
}
sonst if (S.Indexof ('.') == 0) {
array_elem = array_elem.concat (_getByClassName (slice (1)));
}
anders{
var Tag = document.getElementsByTagName (s);
für (var n = 0, i = tag.length; n <i; n ++) {
array_elem.push (tag [n]);
}
}
return array_elem;
}
/*
@Arry_elm [Array]: Elementarray, wie ['.demo', 'P'], wählen Sie das P -Element unten. Demo. Ob Sie nach Nachkommen oder Nachkommen auswählen, finden Sie in der zweiten Parameterer Erklärung
@R [String] - Optional (Standardeinstellung besteht darin, Nachkommen auszuwählen, wenn Sie nicht bestehen): '>' ist das Element der Auswahl von Nachkommen;
------------------------------------
@ return [Array]
*/
Funktion _Query (Array_Elem, r) {
var node = array_elem,
type_name = node [0] .match (//#/)? 'id _'+node [0] .lice (1): node [0] .match (//./)? 'classname _'+node [0] .slice (1): 'Tagname _'+Node [0],
child = _getdom (Knoten [1]),
type = type_name.split ('_'),
len = document.getElementsByTagName ('*'). Länge,
reg = neuer regexp ("(^| // s)"+Typ [1]+"(// s | $)") ;;
für (var i = 0, j = child.length; i <j; i ++) {
var par = child [i] .Parentnode;
für (var n = 0; n <len; n ++) {
if (par.nodetype == 9) {
brechen;
}
if (reg.test (par [type [0]])) {
Elem.push (Kind [i]);
brechen;
}anders{
if (r == '>') brechen;
par = par.Parentnode;
}
}
}
}
/* Schnittstelle
----------------------*///
var elemstr = str.replace (/(^/s+) | (/s+$)/, '');
if (document.querySelectorAll) {
var dom = document.querySelectorAll (ELEMSTR);
für (var n = 0, len = Dom.Length; n <len; n ++) {
Elem.push (Dom [n]);
}
}anders{
var split = /;//s weibs/g.exec(elemstr);
if (split) {
var node = elemstr.Split (split [0]);
_Query (Knoten, Split [0]);
}anders{
elem = elem.concat (_getdom (elemstr));
}
}
Return Elem;
}
/* Popup-Funktionskonstruktor
----------------------*///
Funktion lgy_photobox (Option) {
this.opt = Option;
this.otarget = typeof option.target == 'Objekt'? Option.target: selector (option.target);
if (! this.otarget) return;
this.nlen = this.otarget.length; // Gesamtzahl
this.abigimg_src = []; // großes Bilddatenarray
this.atitle = []; // Title Data Array
this.nindex = 0; //Index
this.nimgwidth = 0; // Dynamisch die Breite des Bildes erhalten
this.nimgheight = 0; // Dynamisch die Bildhöhe erhalten
this.ndelay = 0,2;
this.intit ();
}
Lgy_photobox.prototype = {
intit: function () {
var _that = this;
this.getData ();
für (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);
// Keine Scroll -Leiste wird auf der Einstellungs -Browsing -Seite angezeigt
_that.tools.setcss (document.documentElement, {'height': '100%', 'Overflow-y': 'Hidden', 'Overflow-X': 'Hidden'});
// Erhalten Sie den Index zu diesem Zeitpunkt
_that.nindex = this.index;
// Erstes Urteil
_that.firstload (_that.abigimg_src [_that.nindex], function () {
// Struktur einfügen
_that.createBoxdom ();
//Schließung
_that.tools.getId ('gy_photobox_close'). onclick = function () {
_that.removeBox ();
}
// Richter linke und rechte Schaltflächen zum Anzeigen beurteilen
_That.Btnishow ();
// Vorherige
_that.BTNPrev ();
// Nächste
_that.BTNNext ();
// das Bild laden
_that.imgChange (_that.abigimg_src [_that.nindex]);
});
// Fenstergröße zurücksetzen
_that.WindowResize ();
// Tastaturereignisse
_that.Keyevent ();
// Sprung stoppen
false zurückgeben;
}
}
},
createBoxdom: function () {
var doc = document,
extreml = '',
boxhtml = doc.createelement ('div');
boxhtml.id = 'gy_photobox';
doc.body.appendchild (boxhtml);
if (typed this.opt.Appendhtml == 'String') {
extreml = this.opt.Appendhtml;
}
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">'+extrahtml+'</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>';
},
createSecover: function () {
// Überlagerung erstellen
var doc = document,
Coverhtml = doc.createelement ('div');
coverhtml.id = 'gy_photobox_cover';
doc.body.Appendchild (Coverhtml);
// Stellen Sie den Stil der Overlay -Schicht fest
this.tools.setcsss (this.tools.getId ('gy_photobox_cover'), {'Höhe' :( doc.body.scrolltop || doc.documentElement.scrolltop)+(doc.documentElement.clientHeight)+'px'});
},
setboxcss: function () {
var doc = document,
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,
width = this.nimgwidth,,
Höhe = this.nimgheight;
// alert ('nwindow_h:'+nwindow_h+'-'+'eBoxPadding:'+eBoxPadding+'-'+'ebox_head_h:'+ebox_head_h);
// Die Bildgröße überschreitet den sichtbaren Bereich, Zoom
if (this.nimgHeight> hold_h) {
Höhe = Hold_h,
width = math.ceil (this.nimgwidth*(Höhe/this.nimgHeight));
}
// Setzen Sie die in der gesamte Seite zentrierte Box
this.tools.setcsss (ebox, {'width': width+'px',
'Höhe': ebox_head_h + Höhe + 'px',
'Margin-Links' :-( Width+EboxPadding)/2+'px',,
'top': nscrolltop+(nwindow_h-height-eboxpadding)/2+'px'});
this.tools.setcsss (this.tools.getId ('gy_photobox_main'), {'width': width + 'px', 'Höhe': Höhe + 'px'});
// Stellen Sie den Stil der Overlay -Schicht fest
this.tools.setcsss (this.tools.getId ('gy_photobox_cover'), {'Höhe': nscrolltop+doc.documentElement.clientHeight+'px'});
},
REDEBOX: FUNKTION () {
var doc = document;
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.setcsss (document.documentElement, {'height': 'auto', 'overflow-y': 'auto', '_ Überlauf-y': 'scroll', 'overflow-x': 'auto'});
},
getData: function () {
für (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 (Titel);
}
},
btnishow: 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 = this,,
_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');
// Ladebild anzeigen
this.tools.setcsss (eloadingtips, {'display': 'block'});
this.tools.setcss (EinFor, {'display': 'keine'});
// Richter linke und rechte Schaltflächen zum Anzeigen beurteilen
this.Btnishow ();
// Bildladeverarbeitung
this.imgloading ({{
'src': _ src,
'Erfolg': function () {
_that.tools.setcss (eloadingTips, {'display': 'keine'});
_that.tools.setcss (EinFor, {'display': 'block'});
// Setzen Sie den realen Bildpfad, den Titel, die aktuelle Seitennummer
eimg.src = _src;
ETITLE.INNERHTML = _THAT.ATITLE [_THAT.NINDEX];
_that.tools.getId ('gy_photobox_index'). InnerHtml = (_that.nindex+1);
// Stil setzen
_that.setboxcss ();
// Popup-Fenster wird angezeigt
_that.tools.setcss (_that.tools.getId ('gy_photobox'), {'Sichtbarkeit': 'sichtbar'});
if (_that.tools.getId ('gy_photobox_firstload')) {
document.body.removechild (_that.tools.getId ('gy_photobox_firstload'));
}
// Die Rückruffunktion, die jedes Mal ausgeführt wird, wenn der Switch ist
if (typeof _that.opt.onchange == 'Funktion') {
_that.opt.onchange ({'src': _ src, 'index': _ that.nindex, 'title': _ thatitle [_that.nindex]});
}
},
'Fehler': function () {
setTimeout (function () {
_that.tools.setcss (eloadingTips, {'display': 'keine'});
}, 200);
eimg.src = 'gyphotobox/error.png';
ETITLE.INNERHTML = 'Keine verwandten Bilder';
_that.nimgwidth = 400;
_that.nimgheeight = 300;
_that.setboxcss ();
_that.tools.setcss (_that.tools.getId ('gy_photobox'), {'Sichtbarkeit': 'sichtbar'});
if (_that.tools.getId ('gy_photobox_firstload')) {
document.body.removechild (_that.tools.getId ('gy_photobox_firstload'));
}
}
});
},
btnprev: function () {
var _that = this;
this.tools.getId ('gy_photobox_prev'). onclick = function () {
_that.Nindex--;
_that.imgChange ();
}
},
btnnext: function () {
var _that = this;
this.tools.getId ('gy_photobox_next'). onclick = function () {
_that.nindex ++;
_that.imgChange ();
}
},
KeyEvent: function () {
var _that = this;
document.onkeydown = function (e) {
var e = e || Fenster.Event;
Switch (e.keycode) {
Fall 37: {
if (_that.nindex! = 0 && _ that.tools.getId ('gy_photobox_prev') {
_that.Nindex--;
_that.imgChange ();
}
};brechen;
Fall 39: {
if (_that.nindex!
_that.nindex ++;
_that.imgChange ();
}
};brechen;
Fall 27: {
_that.removeBox ();
};brechen;
}
}
},
/*
@ src [String] Bildadresse
@ Erfolg [Funktion] Rückruffunktion für ein erfolgreiches Bildladen
@ Fehler [Funktion] Rückruffunktion für fehlgeschlagenes Bildladen
*/
Imgloading: Funktion (opt) {
var _img = new Image (),
_that = this;
_img.onload = function () {
_that.nimgwidth = this.width;
_that.nimgHeight = this.height;
if (typeof opt.success == 'Funktion') {
setTimeout (function () {
opt.success ();
}, 300);
}
}
_img.onerror = function () {
if (typeof opt.Error) {
opt.Error ();
}
}
// Hinweis: Es sollte unter das Onload -Ereignis platziert werden, sonst hat der IE einen Fehler
_img.src = opt.src;
},
Erstload: Funktion (SRC, Callback) {
var _that = this,,
html = document.createelement ('div');
html.id = 'gy_photobox_firstload';
document.body.appendchild (html);
this.tools.setcsss (this.tools.getId ('gy_photobox_firstload'), {'top' :( document.body.scrolltop || document.documentElement.scrolltop) +(document.documentElement.clientHeight/2) +'px'});
if (typeof callback == 'Funktion') {
callback ();
}
},
windowResize: function () {
var _that = this,,
_timer = null;
// Funktionsdrosselung
window.onResize = function () {
Clearimeout (_timer);
_timer = setTimeout (function () {
if (_that.tools.getId ('gy_photobox')) {
_that.setboxcss ();
}
}, 100);
}
},
Tools: function () {
zurückkehren{
GetEvent: Funktion (e) {
Return e || Fenster.Event;
},
GetTarget: Funktion (e) {
return e.target || e.srcelement;
},
PREVETDEFAULT: Funktion (e) {
E.PreventDeFault? E.PreventDefault (): E. returnValue = false;
},
getId: function (id) {
return document.getElementById (id);
},
GetCSS: Funktion (Knoten, Wert) {
return node.currentStyle? node
},
setCSS: Funktion (Knoten, Val) {
für (var v in val) {
node.Style.csStext += ';' +v +':' +val [v];
}
}
}
} ())
}
window.lgy_photobox = lgy_photobox;
}) ();
Endgültiges Rendering: