【1 varを使用して複数の変数を宣言します。これは、各変数にVARを使用するよりもはるかに高速です
コードコピーは次のとおりです。
var sscrolltop = document.body.scrolltop || document.documentlement.scrolltop、
swindow_h = document.documentelement.clientheight、
t_h = parseint（this.getcss（this.getid（ 'gy_photobox_head'）、 'height'））、
hold_h = swindow_h -t_h -20、
width = this.nimgwidth、
高さ= this.nimgheight;
[2] DOMイベントの最適化、Window.Onresizeの場合、頻繁な呼び出しが発生しないようにタイマーとSetimeOutを定義する
コードコピーは次のとおりです。
windowresize：function（）{
var _that =これ、
_timer = null;
//関数スロットリング
window.onresize = function（）{
ClearTimeout（_timer）;
_timer = setimeout（function（）{
if（_that.tools.getid（ 'gy_photobox'））{
_that.setboxcss（）;
}
}、100）;
}
}
【3つの】画像読み込み処理機能
コードコピーは次のとおりです。
/*
@ src [string]画像アドレス
@ success [function]画像読み込みを成功させるためのコールバック関数
@ error [function]障害のある画像読み込みのコールバック関数
*/
imgloading：function（opt）{
var _img = new image（）、
_tat = this;
_img.onload = function（）{
_that.nimgwidth = this.width;
_that.nimgheight = this.height;
if（typeof opt.success == 'function'）{
setimeout（function（）{
opt.success（）;
}、300）;
}
}
_img.onerror = function（）{
if（typeof opt.error）{
opt.error（）;
}
}
//注：オンロードイベントの下に配置する必要があります。そうしないと、IEにバグがあります
_img.src = opt.src;
}
ソースコード：
コードコピーは次のとおりです。
/*
著者：laoguoyong
*/
（関数（）{
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@パラメータ[String]
-----------------------------------------------
★ - 次の選択がサポートされています - ★
@サポートファーストレベルのセレクター：「#id」、 '。クラス'、「P」など
@ '.class p'、 'body span'などの子孫の選択をサポートする
@ '.class> p'、 'body> span'などの子要素の選択をサポート
---------------------------------------------
@ return [array]
*/
var selector = function（str）{
//一連の要素を定義します
var Elem = [];
/*プライベートメソッド
-----------------------*/
// IDである要素を返します
function _getid（id）{
document.getElementByID（ID）を返します。
}
//この名前の要素で要素を返します
function _getByClassName（className、parent）{
var class_array = []、
node = parent！= undefined && parent.nodetype == 1？parent.getElementsByTagname（ '*'）：document.getElementsByTagname（ '*'）、
reg = new regexp（ "（^| // s）"+className+"（// s | $）"）;
for（var n = 0、i = node.length; n <i; n ++）{
if（reg.test（node [n] .classname））{
class_array.push（node [n]）;
}
}
class_arrayを返します。
}
// '#id'、 'p'、 '。クラス'などのレベル1の選択
// return [array]
関数_getdom（s）{
var array_elem = [];
if（s.indexof（ '＃'）== 0）{
array_elem.push（_getid（s.slice（1）））;
}
else if（s.indexof（ '。'）== 0）{
array_elem = array_elem.concat（_getbyclassname（s.slice（1）））;
}
それ以外{
var tag = document.getElementsByTagname（s）;
for（var n = 0、i = tag.length; n <i; n ++）{
array_elem.push（tag [n]）;
}
}
return array_elem;
}
/*
@arry_elm [array]：['.demo'、 'p'などの要素配列、.demoの下のp要素を選択します。子孫または子孫を選択するかどうかについては、2番目のパラメーターの説明を参照してください
@R [String] - オプション（デフォルトは、合格しない場合は下子孫を選択するためです）： '>'は、子孫を選択する要素です。
-------------------------------------------
@ return [array]
*/
function _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]、
child = _getdom（node [1]）、
type = type_name.split（ '_'）、
len = document.getElementsByTagname（ '*'）。長さ、
reg = new regexp（ "（^| // s）"+type [1]+"（// s | $）"）;;
for（var i = 0、j = child.length; i <j; i ++）{
var par = child [i] .parentnode;
for（var n = 0; n <len; n ++）{
if（par.nodetype == 9）{
壊す;
}
if（reg.test（par [type [0]]）））{
elem.push（child [i]）;
壊す;
}それ以外{
if（r == '>'）break;
par = par.parentnode;
}
}
}
}
/*インターフェイス
-----------------------*/
var elemstr = str.replace（/（^/s+）|（/s+$）/、 ''）;
if（document.queryselectorall）{
var dom = document.queryselectorall（elemstr）;
for（var n = 0、len = dom.length; n <len; n ++）{
elem.push（dom [n]）;
}
}それ以外{
var split =/[//s]/g.exec(elemstr）;
if（split）{
var node = elemstr.split（split [0]）;
_Query（node、split [0]）;
}それ以外{
elem = elem.concat（_getdom（elemstr））;
}
}
エレムを返します。
}
/*ポップアップ関数コンストラクター
-----------------------*/
function lgy_photobox（option）{
this.opt = option;
this.otarget = typeof option.target == 'object'？option.target：selector（option.target）;
if（！this.otarget）return;
this.nlen = this.otarget.length; //総数
this.abigimg_src = []; //大規模な画像データアレイ
this.atitle = []; //タイトルデータアレイ
this.nindex = 0; //索引
this.nimgwidth = 0; //画像の幅を動的に取得します
this.nimgheight = 0; //画像の高さを動的に取得します
this.ndelay = 0.2;
this.intit（）;
}
lgy_photobox.prototype = {
intit：function（）{
var _that = this;
this.getData（）;
for（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）、
ターゲット= _that.tools.getTarget（e）;
//設定ブラウジングページにスクロールバーが表示されません
_that.tools.setcss（document.documentlement、{'height'： '100％'、 'overflow-y'： 'hidden'、 'overflow-x'： 'hidden'}）;
//その時点でインデックスを取得します
_that.nindex = this.index;
//最初の判断
_that.firstload（_that.abigimg_src [_that.nindex]、function（）{
//構造を挿入します
_that.createboxdom（）;
//閉鎖
_that.tools.getid（ 'gy_photobox_close'）。onclick = function（）{
_that.removebox（）;
}
//左および右のボタンを表示します
_that.btnissoh（）;
// 前の
_that.btnprev（）;
// 次
_that.btnnext（）;
//画像をロードします
_that.imgchange（_that.abigimg_src [_that.nindex]）;
}）;
//ウィンドウサイズをリセットします
_that.windowresize（）;
//キーボードイベント
_that.keyevent（）;
//ジャンプを停止します
falseを返します。
}
}
}、
createboxdom：function（）{
var doc = document、
exhtml = ''、
boxhtml = doc.createelement（ 'div'）;
boxhtml.id = 'gy_photobox';
doc.body.appendchild（boxhtml）;
if（typeof this.opt.appendhtml == 'string'）{
exhtml = 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">'+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（）{
//オーバーレイを作成します
var doc = document、
coverhtml = doc.createelement（ 'div'）;
coverhtml.id = 'gy_photobox_cover';
doc.body.appendchild（coverhtml）;
//オーバーレイレイヤーのスタイルを設定します
this.tools.setcss（this.tools.getid（ 'gy_photobox_cover'）、{'height' :( 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、
高さ= this.nimgheight;
// alert（ 'nwindow_h：'+nwindow_h+' - '+'eboxpadding：'+eboxpadding+' - '+'ebox_head_h：'+ebox_head_h）;
//画像サイズは、可視範囲のズームを超えています
if（this.nimgheight> hold_h）{
height = hold_h、
width = math.ceil（this.nimgwidth*（height/this.nimgheight））;
}
//ページ全体に中央にボックスを設定します
this.tools.setcss（ebox、{'width'：width+'px'、
「高さ」：ebox_head_h + height + 'px'、
'マージン左' :-( width+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'}）;
//オーバーレイレイヤーのスタイルを設定します
this.tools.setcss（this.tools.getid（ 'gy_photobox_cover'）、{'height'：nscrolltop+doc.documentelement.clientheight+'px'}）;
}、
removalbox：function（）{
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.setcss（document.documentlement、{'height'： 'auto'、 'overflow-y'： 'auto'、 '_ overflow-y'： 'scroll'、 'overflow-x'： 'auto'}）;
}、
getData：function（）{
for（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（title）;
}
}、
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 =これ、
_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'）;
//読み込み画像を表示します
this.tools.setcss（eloadingtips、{'display'： 'block'}）;
this.tools.setcss（einfor、{'display'： 'none'}）;
//左および右のボタンを表示します
this.btnissoh（）;
//画像の読み込み処理
this.imgloading（{
'src'：_ src、
「成功」：function（）{
_that.tools.setcss（eloadingtips、{'display'： 'none'}）;
_that.tools.setcss（einfor、{'display'： 'block'}）;
//実際の画像パス、タイトル、現在のページ番号を設定します
eimg.src = _src;
etitle.innerhtml = _that.atitle [_that.nindex];
_that.tools.getid（ 'gy_photobox_index'）。innerhtml =（_that.nindex+1）;
//スタイルを設定します
_that.setboxcss（）;
//ポップアップウィンドウが表示されます
_that.tools.setcss（_that.tools.getid（ 'gy_photobox'）、{'visibility'： 'visible'}）;
if（_that.tools.getid（ 'gy_photobox_firstload'））{
document.body.removechild（_that.tools.getid（ 'gy_photobox_firstload'））;
}
//スイッチがなるたびに実行されるコールバック関数
if（typeof _that.opt.onchange == 'function'）{
_that.opt.onchange（{'src'：_ src、 'index'：_ that.nindex、 'title'：_ that.atitle [_that.nindex]}）;
}
}、
「エラー」：function（）{
setimeout（function（）{
_that.tools.setcss（eloadingtips、{'display'： 'none'}）;
}、200）;
eimg.src = 'gyphotobox/error.png';
etitle.innerhtml = '関連する写真なし';
_that.nimgwidth = 400;
_that.nimgheight = 300;
_that.setboxcss（）;
_that.tools.setcss（_that.tools.getid（ 'gy_photobox'）、{'visibility'： 'visible'}）;
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 || window.event;
switch（e.keycode）{
ケース37：{
if（_that.nindex！= 0 && _ that.tools.getid（ 'gy_photobox_prev'））{
_that.nindex--;
_that.imgchange（）;
}
};壊す;
ケース39：{
if（_that.nindex！=（_that.nlen-1）&& _ that.tools.getid（ 'gy_photobox_next'））{
_that.nindex ++;
_that.imgchange（）;
}
};壊す;
ケース27：{
_that.removebox（）;
};壊す;
}
}
}、
/*
@ src [string]画像アドレス
@ success [function]画像読み込みを成功させるためのコールバック関数
@ error [function]障害のある画像読み込みのコールバック関数
*/
imgloading：function（opt）{
var _img = new image（）、
_tat = this;
_img.onload = function（）{
_that.nimgwidth = this.width;
_that.nimgheight = this.height;
if（typeof opt.success == 'function'）{
setimeout（function（）{
opt.success（）;
}、300）;
}
}
_img.onerror = function（）{
if（typeof opt.error）{
opt.error（）;
}
}
//注：オンロードイベントの下に配置する必要があります。そうしないと、IEにバグがあります
_img.src = opt.src;
}、
firstLoad：function（src、callback）{
var _that =これ、
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'）{
折り返し電話（）;
}
}、
windowresize：function（）{
var _that =これ、
_timer = null;
//関数スロットリング
window.onresize = function（）{
ClearTimeout（_timer）;
_timer = setimeout（function（）{
if（_that.tools.getid（ 'gy_photobox'））{
_that.setboxcss（）;
}
}、100）;
}
}、
ツール：function（）{
戻る{
GetEvent：function（e）{
e ||を返しますwindow.event;
}、
getTarget：function（e）{
e.targetを返します|| E.SRCELEMENT;
}、
PreventDefault：function（e）{
e.PreventDefault？E.PreventDefault（）：E.ReturnValue = false;
}、
getId：function（id）{
document.getElementByID（ID）を返します。
}、
getCSS：function（node、value）{
return node.currentStyle？node.currentStyle [value]：getComputedStyle（node、null）[value];
}、
setcss：function（node、val）{
for（var v in val）{
node.style.csstext += ';' +v +'：' +val [v];
}
}
}
}（）
}
window.lgy_photobox = lgy_photobox;
}）（）;
最終レンダリング：