/*
pengarang:laoguoyong
*/
(fungsi(){
/* -------------------------Pemilih mudah------------------ --- -
@ parameter [rentetan]
---------------------------------------
★-Hanya sokong pilihan berikut-★
@ Menyokong pemilih peringkat pertama: seperti '#id', '.class', 'p'
@ Sokong pemilihan keturunan, seperti '.class p', 'span badan'
@ Menyokong pemilihan sub-elemen, seperti '.class>p', 'body>span'
---------------------------------------
@ pulangkan [Array]
*/
var selector = function(str){
//Tentukan tatasusunan elemen
var elem = [];
/* Kaedah peribadi
*/
//Kembalikan elemen dengan id
fungsi _getId(id){
pulangkan document.getElementById(id);
}
//Kembalikan elemen dengan nama sedemikian - elemen
Fungsi _getByClassName(className,parent){
var class_array = [],
Nod = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
reg = new RegExp("(^|\s)" className "(
\s|$)");
for(var n=0,i=node.length;n
If(reg.test(nod[n].className)){
class_array.push(nod[n]);
}
}
kembali class_array;
}
//Pemilihan peringkat pertama, seperti '#id','p','.class'
// kembalikan [Array]
fungsi _getDom(s){
var array_elem = [];
Jika (s.indexOf('#')==0){
array_elem.push(_getId(s.slice(1)));
}
lain jika(s.indexOf('.')==0){
array_elem = array_elem.concat(_getByClassName(s.slice(1)));
}
lain{
var tag = document.getElementsByTagName(s);
for(var n=0,i=tag.length;n
array_elem.push(tag[n]);
}
}
kembalikan array_elem;
}
/*
@arry_elm [Array]: Tatasusunan elemen, seperti ['.demo','p'], elemen p di bawah .demo dipilih Sama ada untuk memilih keturunan atau keturunan, sila lihat parameter kedua penjelasan
@ r [String] - Pilihan (jika tidak diluluskan, lalai adalah untuk memilih keturunan): '>', memilih elemen keturunan
-------------------------
@ pulangkan [Array]
*/
fungsi _query(array_elem,r){
nod var = array_elem,
type_name = nod[0].match(/#/)?'id_' nod[0].slice(1):node[0].match(/./)?'className_' nod[0].slice(1 ):'tagName_' nod[0],
anak = _getDom(nod[1]),
type = type_name.split('_'),
len = document.getElementsByTagName('*').panjang,
reg = new RegExp("(^|\s)" type[1] "(
\s|$)");;
for(var i=0,j=child.length;i
var par = child[i].parentNode;
untuk(var n=0;n
if(par.nodeType == 9){
rehat;
}
if(reg.test(par[type[0]])){
elem.push(kanak-kanak[i]);
pecah;
}lain{
if(r == '>') putus;
par = par.parentNode;
}
}
}
}
/* 接口
-----------------------*/
var elemStr = str.replace(/(^s )|(s $)/,'');
if(document.querySelectorAll){
var dom = document.querySelectorAll(elemStr);
untuk(var n=0,len=dom.length;n
elem.push(dom[n]);
}
}lain{
var split = /[>s]/g.exec(elemStr);
jika(berpisah){
var nod = elemStr.split(split[0]);
_query(nod,split[0]);
}lain{
elem = elem.concat( _getDom(elemStr) );
}
}
elem kembali;
}
/* Pembina fungsi tetingkap timbul
-----------------------*/
Fungsi LGY_photoBox(pilihan){
This.opt = pilihan;
This.oTarget = typeof option.target == 'objek'?option.target:selector(option.target);
Jika(!this.oTarget) kembali;
This.nLen = this.oTarget.length; //Jumlah nombor
This.aBigimg_src = []; //Susun atur data imej besar
This.aTitle = []; //Title data array
This.nIndex = 0; //Indeks
This.nImgWidth = 0; //Dapatkan lebar imej
secara dinamik
This.nImgHeight = 0; //Dapatkan ketinggian gambar secara dinamik
This.nDelay = 0.2;
This.intit();
}
LGY_photoBox.prototype = {
intit:function(){
var _itu = ini;
This.getData();
untuk(var n=0;n
This.oTarget[n].index = n;
This.oTarget[n].onclick = function(e){
_that.createCover();
var e = _that.tools.getEvent(e),
Sasaran = _that.tools.getTarget(e);
// Tetapkan halaman semak imbas tanpa jalur bergolek
_that.tools.setCss(document.documentElement,{'height':'100%','overflow-y':'hidden','overflow-x':'hidden'});
// Dapatkan indeks semasa
_that.nIndex = this.index;
//Penghakiman pertama
_that.firstLoad(_that.aBigimg_src[_that.nIndex], function(){
//Sisipkan struktur
_that.createBoxDom();
That.tools.getId('gy_photoBox_close').onclick = function(){
_that.removeBox();
// Tentukan sama ada butang kiri dan kanan memaparkan
_that.btnIsShow();
// 上一张
_that.btnPrev();
// 下一张
_that.btnNext();
// 加载图片
_that.imgChange(_that.aBigimg_src[_that.nIndex]);
});
// 重置窗口大小
_that.windowResize();
// 键盘事件
_that.keyEvent();
//阻止跳转
return 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 = '
'+
'
'+
'
'+
'
'+exHtml+'
'+
'
'+
'
http://www.pconline.com.cn/blank.gif" />'+
'
![]()
'+
'
'+
'
'+
''+
'/'+this.nLen+
''+
'
'+
'
'+
'
';
},
createCover:function(){
// 创建覆盖层
var doc = dokumen,
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 = 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 = ini.nImgWidth ,
ketinggian = ini.nImgHeight;
// alert('nWindow_h:' nWindow_h '-' 'eBoxPadding:' eBoxPadding '-' 'eBox_head_h:' eBox_head_h);
// 图片大小超过可见范围，进行缩放
if(this.nImgHeight>hold_h){
ketinggian = hold_h,
lebar = Math.ceil(this.nImgWidth*(height/this.nImgHeight));
}
//设置盒子在整个页面居中
this.tools.setCss(eBox,{'width':width 'px',
'height':eBox_head_h height 'px',
'margin-left':-(lebar eBoxPadding)/2 'px',
'atas':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'});
},
removeBox: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':'scroll','overflow-x':'auto'}) ;
},
getData:function(){
untuk(var n=0;n
var src = this.oTarget[n].getAttribute('href'),
tajuk = this.oTarget[n].getAttribute('title');
this.aBigimg_src.push(src);
jika(!tajuk) tajuk = '';
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 _itu = 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');
// 显示loading图片
this.tools.setCss(eLoadingTips,{'display':'block'});
this.tools.setCss(eInfor,{'display':'none'});
// 判断左右按钮显示
this.btnIsShow();
// 图片加载处理
this.imgLoading({
'src':_src,
'kejayaan':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();
// Tetingkap timbul muncul
_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'));
}
// Fungsi panggil balik dilaksanakan setiap kali menukar
If(typeof _that.opt.onChange == 'function'){
_that.opt.onChange({'src':_src,'index':_that.nIndex,'title':_that.aTitle[_that.nIndex]});
},
'ralat':function(){
setTimeout(function(){
_that.tools.setCss(eLoadingTips,{'display':'none'});
},200);
eImg.src = 'gyPhotoBox/error.png';
eTitle.innerHTML = 'Tiada gambar berkaitan';
_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 _itu = ini;
This.tools.getId('gy_photoBox_prev').onclick = function(){
_that.nIndex--;
_that.imgChange();
}
},
btnSeterusnya:function(){
var _itu = ini;
this.tools.getId('gy_photoBox_next').onclick = function(){
_that.nIndex ;
_that.imgChange();
}
},
keyEvent:function(){
var _itu = ini;
document.onkeydown = fungsi(e){
var e = e || tingkap.acara;
suis(e.Kod kunci){
kes 37:{
if(_that.nIndex != 0&&_that.tools.getId('gy_photoBox_prev')){
_that.nIndex--;
_that.imgChange();
}
};rehat;
kes 39 :{
if(_that.nIndex != (_that.nLen-1)&&_that.tools.getId('gy_photoBox_next')){
_that.nIndex ;
_that.imgChange();
}
};rehat;
kes 27:{
_that.removeBox();
};rehat;
}
}
},
/*
@ src [String] 图片的地址
@ kejayaan [Fungsi] 图片加载成功的回调函数
@ ralat [Fungsi] 图片加载失败的回调函数
*/
imgLoading:function(opt){
var _img = Imej baharu(),
_itu = 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();
}
}
// 注意：要放在onload事件下面，否则ie会出现BUG
_img.src = opt.src;
},
firstLoad:function(src,panggilan balik){
var _itu = 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(jenis panggilan balik == 'fungsi') {
panggil balik();
}
},
windowResize:function(){
var _itu = ini,
_pemasa = batal;
// 函数节流
window.onresize = function(){
clearTimeout(_pemasa);
_timer = setTimeout(function(){
jika( _that.tools.getId('gy_photoBox')){
_that.setBoxCss();
}
},100);
}
},
alatan:function(){
kembali{
getEvent:function(e){
pulangkan e || tingkap.acara;
},
getTarget:function(e){
pulangkan e.sasaran || e.srcElement;
},
preventDefault:function(e){
e.preventDefault?e.preventDefault():e.returnValue = false;
},
getId:function(id){
kembalikan document.getElementById(id);
},
getCss:function(nod,nilai){
kembalikan node.currentStyle?node.currentStyle[value]:getComputedStyle(nod,null)[value];
},
setCss:function(nod,val){
untuk(var v dalam val){
node.style.cssText = ';' v ':' val[v];
}
}
}
}()
}
window.LGY_photoBox = LGY_photoBox;
})();
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
