【 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'), 'ความสูง')),
hold_h = swindow_h - t_h - 20,
ความกว้าง = this.nimgwidth
ความสูง = this.nimgheight;
[2] การเพิ่มประสิทธิภาพเหตุการณ์ DOM เมื่อ window.onresize กำหนดตัวจับเวลาและ settimeout เพื่อป้องกันไม่ให้เกิดการโทรบ่อยๆ
การคัดลอกรหัสมีดังนี้:
WindowResize: function () {
var _that = สิ่งนี้
_timer = null;
// ฟังก์ชั่นการควบคุมปริมาณ
window.onresize = function () {
ClearTimeout (_timer);
_timer = settimeout (function () {
if (_that.tools.getId ('gy_photobox')) {
_That.SetBoxCSS ();
-
}, 100);
-
-
【ฟังก์ชั่นการประมวลผลการโหลดภาพสามภาพ
การคัดลอกรหัสมีดังนี้:
-
@ SRC [String] ที่อยู่ภาพ
@ success [function] ฟังก์ชั่นการโทรกลับสำหรับการโหลดรูปภาพที่ประสบความสำเร็จ
@ error [function] ฟังก์ชั่น callback สำหรับการโหลดรูปภาพที่ล้มเหลว
-
imgloading: function (opt) {
var _img = 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;
-
ซอร์สโค้ด:
การคัดลอกรหัสมีดังนี้:
-
ผู้แต่ง: Laoguoyong
-
(การทำงาน(){
-
@ พารามิเตอร์ [สตริง]
-
★-รองรับการเลือกต่อไปนี้เท่านั้น-★
@ support selectors ระดับแรก: เช่น '#id', '. class', 'P'
@ สนับสนุนการเลือกลูกหลานเช่น '.class P', 'Body Span'
@ สนับสนุนการเลือกองค์ประกอบลูกเช่น '.class> p', 'body> span'
-
@ return [Array]
-
var selector = function (str) {
// กำหนดอาร์เรย์ขององค์ประกอบ
var elem = [];
/* วิธีส่วนตัว
-
// return lement นั่นคือ id
ฟังก์ชั่น _getId (id) {
ส่งคืน document.getElementById (id);
-
// ส่งคืนองค์ประกอบด้วยองค์ประกอบชื่อนี้
ฟังก์ชั่น _getByClassName (className, Parent) {
var class_array = []
node = parent! = undefined && parent.nodeType == 1? parent.getElementsByTagname ('*'): document.getElementByTagname ('*')
reg = ใหม่ regexp ("(^| // s)"+classname+"(// s | $)");
สำหรับ (var n = 0, i = node.length; n <i; n ++) {
if (reg.test (node [n] .classname)) {
class_array.push (โหนด [n]);
-
-
ส่งคืน class_array;
-
// การเลือกระดับ 1 เช่น '#id', 'p', '. คลาส'
// return [Array]
ฟังก์ชั่น _getdom {
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]);
-
-
return array_elem;
-
-
@arry_elm [อาร์เรย์]: อาร์เรย์องค์ประกอบเช่น ['.demo', 'p'], เลือกองค์ประกอบ P ด้านล่าง. demo สำหรับการเลือกลูกหลานหรือลูกหลานโปรดดูคำอธิบายพารามิเตอร์ที่สอง
@R [String] - ตัวเลือก (ค่าเริ่มต้นคือการเลือกลูกหลานหากคุณไม่ผ่าน): '>' เป็นองค์ประกอบของการเลือกลูกหลาน;
-
@ return [Array]
-
ฟังก์ชั่น _Query (array_elem, r) {
var node = array_elem
type_name = node [0] .match (//#/)? 'id _'+โหนด [0] .slice (1): โหนด [0] .match (//./)?
child = _getdom (โหนด [1])
type = 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 [ประเภท [0]])) {
elem.push (เด็ก [i]);
หยุดพัก;
}อื่น{
if (r == '>') break;
par = par.parentNode;
-
-
-
-
/* อินเทอร์เฟซ
-
var elemstr = str.replace (/(^/s+) | (/s+$)/, '');
if (document.QuerySelectorAll) {
var dom = document.QuerySelectorAll (elemstr);
สำหรับ (var n = 0, len = dom.length; n <len; n ++) {
elem.push (dom [n]);
-
}อื่น{
var split =/[///slike/g.exec(elemstr);
ถ้า (แยก) {
var node = elemstr.split (แยก [0]);
_Query (โหนด, แยก [0]);
}อื่น{
elem = elem.concat (_getdom (elemstr));
-
-
กลับ Elem;
-
/* ตัวสร้างฟังก์ชั่นป๊อปอัพ
-
ฟังก์ชั่น lgy_photobox (ตัวเลือก) {
this.opt = ตัวเลือก;
this.otarget = typeof option.target == 'Object'? ตัวเลือก. เป้าหมาย: ตัวเลือก (ตัวเลือก. เป้าหมาย);
ถ้า (! 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, {'ความสูง': '100%', 'overflow-y': 'ซ่อน', 'overflow-x': 'ซ่อน'});
// รับดัชนีในเวลานั้น
_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 == 'สตริง') {
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 = เอกสาร
coverhtml = doc.createelement ('div');
coverhtml.id = 'gy_photobox_cover';
doc.body.appendchild (coverhtml);
// ตั้งค่าสไตล์ของเลเยอร์ซ้อนทับ
this.tools.setcss (this.tools.getid ('gy_photobox_cover'), {'ความสูง' :( doc.body.scrolltop || doc.documentelement.scrolltop)+(doc.documentelement
-
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
width = 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'});
this.tools.setcss (this.tools.getId ('gy_photobox_main'), {'width': width + 'px', 'ความสูง': ความสูง + 'px'});
// ตั้งค่าสไตล์ของเลเยอร์ซ้อนทับ
this.tools.setcss (this.tools.getId ('gy_photobox_cover'), {'ความสูง': nscrolltop+doc.documentelement.clientheight+'px'});
-
removeBox: function () {
var doc = เอกสาร;
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, {'ความสูง': '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);
if (! title) title = '';
this.atitle.push (ชื่อ);
-
-
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.btnisshow ();
// การประมวลผลการโหลดภาพ
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);
// Set Style
_That.SetBoxCSS ();
// หน้าต่างป๊อปอัพปรากฏขึ้น
_that.tools.setcss (_that.tools.getId ('gy_photobox'), {'การมองเห็น': 'มองเห็นได้'});
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'), {'การมองเห็น': 'มองเห็นได้'});
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;
สวิตช์ (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] ฟังก์ชั่น callback สำหรับการโหลดรูปภาพที่ล้มเหลว
-
imgloading: function (opt) {
var _img = 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;
-
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 || documentEnumentElement.scrolltop) +(document.documentelement.clientheiight/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);
-
-
เครื่องมือ: function () {
กลับ{
GetEvent: ฟังก์ชั่น (e) {
กลับ E || window.event;
-
getTarget: function (e) {
ส่งคืน e.target || E.Srelement;
-
PreventDefault: ฟังก์ชั่น (e) {
E.preventDefault? E.preventDefault (): E.ReturnValue = FALSE;
-
getId: function (id) {
ส่งคืน document.getElementById (id);
-
getCss: ฟังก์ชั่น (โหนด, ค่า) {
ส่งคืน node.currentstyle? node.currentstyle [ค่า]: getComputedStyle (โหนด, null) [ค่า];
-
setcss: function (node, val) {
สำหรับ (var v in val) {
node.style.csstext += ';' +v +':' +val [v];
-
-
-
-
-
window.lgy_photobox = lgy_photobox;
-
การแสดงผลสุดท้าย: