【1】 استخدم VAR لإعلان متغيرات متعددة ، وهي أسرع بكثير من استخدام VAR لكل متغير
نسخة الكود كما يلي:
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 ،
العرض = this.nimgwidth ،
الارتفاع = this.nimgheight ؛
[2] تحسين حدث DOM ، عند النافذة.
نسخة الكود كما يلي:
WindowResize: function () {
var _ that = هذا ،
_timer = null ؛
// وظيفة الاختناق
window.onresize = function () {
ClearTimeout (_timer) ؛
_timer = setTimeOut (function () {
if (_that.tools.getid ('gy_photobox')) {
_ that.setboxcss () ؛
}
} ، 100) ؛
}
}
【ثلاثة】 وظيفة معالجة تحميل الصورة
نسخة الكود كما يلي:
/*
@ src [سلسلة] عنوان الصورة
@ النجاح [وظيفة] وظيفة رد الاتصال لتحميل الصور الناجح
@ خطأ [وظيفة] وظيفة رد الاتصال لتحميل الصورة الفاشل
*/
imgloading: function (OPT) {
var _img = new image () ،
_ that = هذا ؛
_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 () ؛
}
}
// ملاحظة: يجب وضعه تحت حدث Onload ، وإلا فإن IE سيكون لها خطأ
_img.src = opt.src ؛
}
رمز المصدر:
نسخة الكود كما يلي:
/*
المؤلف: لوغويونج
*/
(وظيفة(){
/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@ المعلمات [سلسلة]
-----------------------------------
★-فقط الاختيارات التالية مدعومة-★
@ دعم المختارين من المستوى الأول: مثل "#ID" ، ". الفصل" ، "P"
@ دعم اختيار سليل ، مثل ".class P" ، "SPAN"
@ دعم اختيار عنصر الطفل ، مثل '.class> p' ، 'body> span'
-----------------------------------------
@ العودة [صفيف]
*/
var selector = function (str) {
// تحديد مجموعة من العناصر
var elem = [] ؛
/* طريقة خاصة
-------------------*/
// عنصر الإرجاع الذي هو معرف
الدالة _getID (id) {
return document.getElementById (id) ؛
}
// إرجاع العنصر بهذا العنصر الاسم
الدالة _getByClassName (className ، الوالد) {
var class_array = [] ،
Node = Parent! = undefined && parent.nodeType == 1؟ parent.getElementsByTagName ('*'): document.getElementsByTagname ('*') ،
reg = new regexp ("(^| // s)"+className+"(// s | $)") ؛
لـ (var n = 0 ، i = node.length ؛ n <i ؛ n ++) {
if (reg.test (node [n] .classname)) {
class_array.push (Node [n]) ؛
}
}
إرجاع class_array ؛
}
// اختيار المستوى 1 ، مثل "#ID" ، "P" ، ". الفصل"
// العودة [صفيف]
وظيفة _getdom (s) {
var array_elem = [] ؛
if (s.indexof ('#') == 0) {
array_elem.push (_getid (S.Slice (1))) ؛
}
آخر إذا (s.indexof ('.') == 0) {
array_elem = array_elem.concat (_getByClassName (S.Slice (1))) ؛
}
آخر{
var tag = document.getElementsByTagName (s) ؛
لـ (var n = 0 ، i = tag.length ؛ n <i ؛ n ++) {
array_elem.push (علامة [n]) ؛
}
}
إرجاع array_elem ؛
}
/*
@ARRY_ELM [ARRAY]: AREMAN ARRAY ، مثل ['.demo' ، 'p'] ، حدد عنصر p أدناه .demo. أما إذا كان سيتم اختيار أحفاد أو أحفاد ، يرجى الاطلاع على تفسير المعلمة الثانية
R [String] - اختياري (افتراضي هو تحديد أحفاد إذا لم تمر): '>' ، هو عنصر اختيار أحفاد ؛
--------------------------------------
@ العودة [صفيف]
*/
الدالة _query (array_elem ، r) {
var node = array_elem ،
type_name = node [0] .match (//#/)؟ 'id _'+node [0] .slice (1): node [0] .match (//
الطفل = _getdom (العقدة [1]) ،
اكتب = type_name.split ('_') ،
len = document.getElementsByTagname ('*'). الطول ،
reg = new regexp ("(^| // s)"+type [1]+"(// s | $)") ؛؛
لـ (var i = 0 ، j = child.length ؛ i <j ؛ i ++) {
var par = child [i] .ParentNode ؛
لـ (var n = 0 ؛ n <len ؛ n ++) {
if (par.nodeType == 9) {
استراحة؛
}
if (reg.test (par [type [0]))) {
elem.push (الطفل [i]) ؛
استراحة؛
}آخر{
إذا (r == '>') استراحة ؛
par = par.parentNode ؛
}
}
}
}
/* واجهة
----------------------*/
var elemstr = str.replace (/(^/s+) | (/s+$)/، '') ؛
if (document.queryselectorall) {
var dom = document.queryselectorall (elemster) ؛
لـ (var n = 0 ، len = dom.length ؛ n <len ؛ n ++) {
elem.push (dom [n]) ؛
}
}آخر{
var split =/budap//s.
إذا (انقسام) {
var node = elemstr.split (split [0]) ؛
_query (العقدة ، تقسيم [0]) ؛
}آخر{
elem = elem.concat (_getdom (elemster)) ؛
}
}
إرجاع elem ؛
}
/* منشئ الوظائف المنبثقة
----------------------*/
دالة lgy_photobox (الخيار) {
this.opt = الخيار ؛
this.otarget = typeof option.target == 'Object'؟ Option.target: concector (ortor.target) ؛
إذا (! this.otarget) العودة ؛
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 () ؛
لـ (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) ؛
// لا يظهر شريط التمرير على صفحة تصفح الإعدادات
_That.tools.setcss (document.documentElement ، {'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.btnisshow () ؛
// سابق
_ that.btnprev () ؛
// التالي
_ that.btnnext () ؛
// تحميل الصورة
_THAT.IMGCHANGE (_THAT.ABIGIMG_SRC [_THAT.NINDEX]) ؛
}) ؛
// إعادة تعيين حجم النافذة
_ that.windowresize () ؛
// أحداث لوحة المفاتيح
_ that.keyevent () ؛
// توقف القفز
العودة كاذبة
}
}
} ،
CreateBoxdom: function () {
var doc = وثيقة ،
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"> </viv>'+
'<div id = "gy_photobox_next"> </viv>'+
'<span id = "gy_photobox_close"> </span>'+
"<div id =" gy_photobox_head "> '+exhtml+' </fiv> '+
'<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 = وثيقة ،
CoverHtml = doc.CreateElement ('div') ؛
coverhtml.id = 'gy_photobox_cover' ؛
doc.body.appendchild (coverhtml) ؛
// اضبط نمط طبقة التراكب
that.tools.setcss (this.tools.getId ('gy_photobox_cover') ، {'height' :( doc.body.scrolltop || doc.documentElement.scrolltop)+(doc.documentElement.clientheight)+'px'}) ؛
} ،
setBoxcss: function () {
var doc = وثيقة ،
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 ،
العرض = this.nimgwidth ،
الارتفاع = this.nimgheight ؛
// ALERT ('nwindow_h:'+nwindow_h+'-'+'eBoxPadding:'+eboxpadding+'-'+'ebox_head_h:'+ebox_head_h) ؛
// يتجاوز حجم الصورة النطاق المرئي ، التكبير
if (this.nimgheight> hold_h) {
الارتفاع = Hold_H ،
العرض = math.ceil (this.nimgwidth*(الارتفاع/this.nimgheight)) ؛
}
// قم بتعيين المربع المتمركز في جميع أنحاء الصفحة
this.tools.setcss (eBox ، {'width': width+'px' ،
"الارتفاع": EBOX_HEAD_H + الارتفاع + "PX" ،
'margin-left' :- (width+eBoxPadding)/2+'px' ،
'top': nscrolltop+(nwindow_h-height-eboxpadding)/2+'px'}) ؛
tho.tools.setcss (this.tools.getId ('gy_photobox_main') ، {'width': width + 'px' ، 'height': height + 'px'}) ؛
// اضبط نمط طبقة التراكب
that.tools.setcss (this.tools.getId ('gy_photobox_cover') ، {'height': nscrolltop+doc.documentElement.clientheight+'px'}) ؛
} ،
removeBox: 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')) ؛
}
that.tools.setcss (document.documentElement ، {'height': 'auto' ، 'overflow-y': 'auto' ، '_ overflow-y': 'scroll' ، 'overflow-x': 'auto'}) ؛
} ،
getData: function () {
لـ (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) ؛
إذا (! العنوان) title = '' ؛
this.atitle.push (title) ؛
}
} ،
btnisshow: function () {
that.tools.setcss (this.tools.getId ('gy_photobox_prev') ، {'display': 'block'}) ؛
that.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.btnisshow () ؛
// معالجة تحميل الصور
this.imgloading ({
'SRC': _ SRC ،
'Success': 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') ، {'الرؤية': '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 () {
setTimeout (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') ، {'الرؤية': 'visible'}) ؛
if (_that.tools.getid ('gy_photobox_firstload')) {
document.body.removechild (_that.tools.getId ('gy_photobox_firstload')) ؛
}
}
}) ؛
} ،
btnprev: function () {
var _ that = this ؛
tho.tools.getid ('gy_photobox_prev'). onClick = function () {
_ that.nindex-- ؛
_ that.imgChange () ؛
}
} ،
btnnext: function () {
var _ that = this ؛
tho.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 ؛
التبديل (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 [سلسلة] عنوان الصورة
@ النجاح [وظيفة] وظيفة رد الاتصال لتحميل الصور الناجح
@ خطأ [وظيفة] وظيفة رد الاتصال لتحميل الصورة الفاشل
*/
imgloading: function (OPT) {
var _img = new image () ،
_ that = هذا ؛
_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 () ؛
}
}
// ملاحظة: يجب وضعه تحت حدث Onload ، وإلا فإن IE سيكون لها خطأ
_img.src = opt.src ؛
} ،
First Load: Function (SRC ، Callback) {
var _ that = هذا ،
html = document.createElement ('div') ؛
html.id = 'gy_photobox_firstload' ؛
document.body.appendchild (HTML) ؛
that.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 = setTimeOut (function () {
if (_that.tools.getid ('gy_photobox')) {
_ that.setboxcss () ؛
}
} ، 100) ؛
}
} ،
الأدوات: وظيفة () {
يعود{
getEvent: function (e) {
العودة e || window.event ؛
} ،
getTarget: function (e) {
إرجاع E.Target || E.Srcelement ؛
} ،
PreventDefault: Function (e) {
e.preventDefault؟ e.preventDefault (): e.ReturnValue = false ؛
} ،
getID: وظيفة (معرف) {
return document.getElementById (id) ؛
} ،
getCss: Function (Node ، Value) {
return node.currentStyle؟ node.currentStyle [value]: getComputedStyle (Node ، Null) [value] ؛
} ،
setcss: function (node ، val) {
لـ (var v in val) {
node.style.csstext += '؛' +v +':' +val [v] ؛
}
}
}
} ()
}
window.lgy_photobox = lgy_photobox ؛
}) () ؛
التقديم النهائي: