时间:2021-05-26
使用时,只需要在A标签处加上rel="lightbox"即可。e.g:
<Ahref=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpgrel=lightbox><IMGsrc=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpgheight="100"width="100"></A>
我自己也写了一个,不过涉及两个模块,(func.js公用库,和imagesLoader.js图片载入类)过阵子一并发上来。
<STYLEtype=text/css>
HTML#overlay{
FILTER:Alpha(opacity=50);BACKGROUND-IMAGE:url(images/blank.gif);BACKGROUND-COLOR:#000
}
</STYLE>
<SCRIPTlanguage=javascripttype=text/javascript>
<!--//
functionaddEvent(object,type,handler)
{
if(object.addEventListener){
object.addEventListener(type,handler,false);
}elseif(object.attachEvent){
object.attachEvent(['on',type].join(''),handler);
}else{
object[['on',type].join('')]=handler;
}
}
functionWindowSize()
{//windowsizeobject
this.w=0;
this.h=0;
returnthis.update();
}
WindowSize.prototype.update=function()
{
vard=document;
this.w=
(window.innerWidth)?window.innerWidth
:(d.documentElement&&d.documentElement.clientWidth)?d.documentElement.clientWidth
:d.body.clientWidth;
this.h=
(window.innerHeight)?window.innerHeight
:(d.documentElement&&d.documentElement.clientHeight)?d.documentElement.clientHeight
:d.body.clientHeight;
returnthis;
};
functionPageSize()
{//pagesizeobject
this.win=newWindowSize();
this.w=0;
this.h=0;
returnthis.update();
}
PageSize.prototype.update=function()
{
vard=document;
this.w=
(window.innerWidth&&window.scrollMaxX)?window.innerWidth+window.scrollMaxX
:(d.body.scrollWidth>d.body.offsetWidth)?d.body.scrollWidth
:d.body.offsetWidt;
this.h=
(window.innerHeight&&window.scrollMaxY)?window.innerHeight+window.scrollMaxY
:(d.body.scrollHeight>d.body.offsetHeight)?d.body.scrollHeight
:d.body.offsetHeight;
this.win.update();
if(this.w<this.win.w)this.w=this.win.w;
if(this.h<this.win.h)this.h=this.win.h;
returnthis;
};
functionPagePos()
{//pagepositionobject
this.x=0;
this.y=0;
returnthis.update();
}
PagePos.prototype.update=function()
{
vard=document;
this.x=
(window.pageXOffset)?window.pageXOffset
:(d.documentElement&&d.documentElement.scrollLeft)?d.documentElement.scrollLeft
:(d.body)?d.body.scrollLeft
:0;
this.y=
(window.pageYOffset)?window.pageYOffset
:(d.documentElement&&d.documentElement.scrollTop)?d.documentElement.scrollTop
:(d.body)?d.body.scrollTop
:0;
returnthis;
};
functionUserAgent()
{//useragentinformation
varua=navigator.userAgent;
this.isWinIE=this.isMacIE=false;
this.isGecko=ua.match(/Gecko\//);
this.isSafari=ua.match(/AppleWebKit/);
this.isOpera=window.opera;
if(document.all&&!this.isGecko&&!this.isSafari&&!this.isOpera){
this.isWinIE=ua.match(/Win/);
this.isMacIE=ua.match(/Mac/);
this.isNewIE=(ua.match(/MSIE5\.5/)||ua.match(/MSIE6\.0/));
}
returnthis;
}
//===lightbox===
functionLightBox(option)
{
varself=this;
self._imgs=newArray();
self._wrap=null;
self._box=null;
self._open=-1;
self._page=newPageSize();
self._pos=newPagePos();
self._ua=newUserAgent();
self._expandable=false;
self._expanded=false;
self._expand=option.expandimg;
self._shrink=option.shrinkimg;
returnself._init(option);
}
LightBox.prototype={
_init:function(option)
{
varself=this;
vard=document;
if(!d.getElementsByTagName)return;
varlinks=d.getElementsByTagName("a");
for(vari=0;i<links.length;i++){
varanchor=links[i];
varnum=self._imgs.length;
if(!anchor.getAttribute("href")
||anchor.getAttribute("rel")!="lightbox")continue;
//initializeitem
self._imgs[num]={src:anchor.getAttribute("href"),w:-1,h:-1,title:'',cls:anchor.className};
if(anchor.getAttribute("title"))
self._imgs[num].title=anchor.getAttribute("title");
elseif(anchor.firstChild&&anchor.firstChild.getAttribute&&anchor.firstChild.getAttribute("title"))
self._imgs[num].title=anchor.firstChild.getAttribute("title");
anchor.onclick=self._genOpener(num);//setclosuretoonclickevent
}
varbody=d.getElementsByTagName("body")[0];
self._wrap=self._createWrapOn(body,option.loadingimg);
self._box=self._createBoxOn(body,option);
returnself;
},
_genOpener:function(num)
{
varself=this;
returnfunction(){self._show(num);returnfalse;}
},
_createWrapOn:function(obj,imagePath)
{
varself=this;
if(!obj)returnnull;
//createwrapperobject,translucentbackground
varwrap=document.createElement('div');
wrap.id='overlay';
with(wrap.style){
display='none';
position='fixed';
top='0px';
left='0px';
zIndex='50';
width='100%';
height='100%';
}
if(self._ua.isWinIE)wrap.style.position='absolute';
addEvent(wrap,"click",function(){self._close();});
obj.appendChild(wrap);
//createloadingimage,animatedimage
varimag=newImage;
imag.onload=function(){
varspin=document.createElement('img');
spin.id='loadingImage';
spin.src=imag.src;
spin.style.position='relative';
self._set_cursor(spin);
addEvent(spin,'click',function(){self._close();});
wrap.appendChild(spin);
imag.onload=function(){};
};
if(imagePath!='')imag.src=imagePath;
returnwrap;
},
_createBoxOn:function(obj,option)
{
varself=this;
if(!obj)returnnull;
//createlightboxobject,framerectangle
varbox=document.createElement('div');
box.id='lightbox';
with(box.style){
display='none';
position='absolute';
zIndex='60';
}
obj.appendChild(box);
//createimageobjecttodisplayatargetimage
varimg=document.createElement('img');
img.id='lightboxImage';
self._set_cursor(img);
addEvent(img,'click',function(){self._close();});
addEvent(img,'mouseover',function(){self._show_action();});
addEvent(img,'mouseout',function(){self._hide_action();});
box.appendChild(img);
varzoom=document.createElement('img');
zoom.id='actionImage';
with(zoom.style){
display='none';
position='absolute';
top='15px';
left='15px';
zIndex='70';
}
self._set_cursor(zoom);
zoom.src=self._expand;
addEvent(zoom,'mouseover',function(){self._show_action();});
addEvent(zoom,'click',function(){self._zoom();});
box.appendChild(zoom);
addEvent(window,'resize',function(){self._set_size(true);});
//closebutton
if(option.closeimg){
varbtn=document.createElement('img');
btn.id='closeButton';
with(btn.style){
display='inline';
position='absolute';
right='10px';
top='10px';
width='15px';
height='15px';
zIndex='80';
}
btn.src=option.closeimg;
self._set_cursor(btn);
addEvent(btn,'click',function(){self._close();});
box.appendChild(btn);
}
//captiontext
varcaption=document.createElement('span');
caption.id='lightboxCaption';
with(caption.style){
display='none';
position='absolute';
zIndex='80';
}
box.appendChild(caption);
//createeffectimage
if(!option.effectpos)option.effectpos={x:0,y:0};
else{
if(option.effectpos.x=='')option.effectpos.x=0;
if(option.effectpos.y=='')option.effectpos.y=0;
}
vareffect=newImage;
effect.onload=function(){
vareffectImg=document.createElement('img');
effectImg.id='effectImage';
effectImg.src=effect.src;
if(option.effectclass)effectImg.className=option.effectclass;
with(effectImg.style){
position='absolute';
display='none';
left=[option.effectpos.x,'px'].join('');;
top=[option.effectpos.y,'px'].join('');
zIndex='90';
}
self._set_cursor(effectImg);
addEvent(effectImg,'click',function(){effectImg.style.display='none';});
box.appendChild(effectImg);
};
if(option.effectimg!='')effect.src=option.effectimg;
returnbox;
},
_set_photo_size:function()
{
varself=this;
if(self._open==-1)return;
varimag=self._box.firstChild;
vartarg={w:self._page.win.w-30,h:self._page.win.h-30};
varorig={w:self._imgs[self._open].w,h:self._imgs[self._open].h};
//shrinkimagewiththesameaspect
varratio=1.0;
if((orig.w>=targ.w||orig.h>=targ.h)&&orig.h&&orig.w)
ratio=((targ.w/orig.w)<(targ.h/orig.h))?targ.w/orig.w:targ.h/orig.h;
imag.width=Math.floor(orig.w*ratio);
imag.height=Math.floor(orig.h*ratio);
self._expandable=(ratio<1.0)?true:false;
if(self._ua.isWinIE)self._box.style.display="block";
self._box.style.top=[self._pos.y+(self._page.win.h-imag.height-30)/2,'px'].join('');
self._box.style.left=[((self._page.win.w-imag.width-30)/2),'px'].join('');
self._show_caption(true);
},
_set_size:function(onResize)
{
varself=this;
if(self._open==-1)return;
self._page.update();
self._pos.update();
varspin=self._wrap.firstChild;
if(spin){
vartop=(self._page.win.h-spin.height)/2;
if(self._wrap.style.position=='absolute')top+=self._pos.y;
spin.style.top=[top,'px'].join('');
spin.style.left=[(self._page.win.w-spin.width-30)/2,'px'].join('');
}
if(self._ua.isWinIE){
self._wrap.style.width=[self._page.win.w,'px'].join('');
self._wrap.style.height=[self._page.h,'px'].join('');
}
if(onResize)self._set_photo_size();
},
_show_action:function()
{
varself=this;
if(self._open==-1||!self._expandable)return;
varobj=document.getElementById('actionImage');
if(!obj)return;
obj.src=(self._expanded)?self._shrink:self._expand;
obj.style.display='inline';
},
_hide_action:function()
{
varself=this;
varobj=document.getElementById('actionImage');
if(obj)obj.style.display='none';
},
_zoom:function()
{
varself=this;
if(self._expanded){
self._set_photo_size();
self._expanded=false;
}elseif(self._open>-1){
varimag=self._box.firstChild;
self._box.style.top=[self._pos.y,'px'].join('');
self._box.style.left='0px';
imag.width=self._imgs[self._open].w;
imag.height=self._imgs[self._open].h;
self._show_caption(false);
self._expanded=true;
}
self._show_action();
},
_show_caption:function(enable)
{
varself=this;
varcaption=document.getElementById('lightboxCaption');
if(!caption)return;
if(caption.innerHTML.length==0||!enable){
caption.style.display='none';
}else{//nowdisplaycaption
varimag=self._box.firstChild;
with(caption.style){
top=[imag.height+10,'px'].join('');//10istopmarginoflightbox
left='0px';
width=[imag.width+20,'px'].join('');//20istotalsidemarginoflightbox
height='1.2em';
display='block';
}
}
},
_show:function(num)
{
varself=this;
varimag=newImage;
if(num<0||num>=self._imgs.length)return;
varloading=document.getElementById('loadingImage');
varcaption=document.getElementById('lightboxCaption');
vareffect=document.getElementById('effectImage');
self._open=num;//setopenedimagenumber
self._set_size(false);//calcandsetwrappersize
self._wrap.style.display="block";
if(loading)loading.style.display='inline';
imag.onload=function(){
if(self._imgs[self._open].w==-1){
//storeoriginalimagewidthandheight
self._imgs[self._open].w=imag.width;
self._imgs[self._open].h=imag.height;
}
if(effect){
effect.style.display=(!effect.className||self._imgs[self._open].cls==effect.className)
?'block':'none';
}
if(caption)caption.innerHTML=self._imgs[self._open].title;
self._set_photo_size();//calcandsetlightboxsize
self._hide_action();
self._box.style.display="block";
self._box.firstChild.src=imag.src;
self._box.firstChild.setAttribute('title',self._imgs[self._open].title);
if(loading)loading.style.display='none';
};
self._expandable=false;
self._expanded=false;
imag.src=self._imgs[self._open].src;
},
_set_cursor:function(obj)
{
varself=this;
if(self._ua.isWinIE&&!self._ua.isNewIE)return;
obj.style.cursor='pointer';
},
_close:function()
{
varself=this;
self._open=-1;
self._hide_action();
self._wrap.style.display="none";
self._box.style.display="none";
}
};
//===main===
addEvent(window,"load",function(){
varlightbox=newLightBox({
loadingimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/loading.gif',
expandimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/expand.gif',
shrinkimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/shrink.gif',
effectimg:'images/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'images/effectable',
closeimg:'http://image2.sina.com.cn/dy/news/2006/0618/images/close.gif'
});
});
//-->
</SCRIPT>
<Ahref=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpgrel=lightbox><IMGsrc=http://image2.sina.com.cn/dy/other/74/U1571P1T74D1184F1625DT20060618123137.jpgheight="100"width="100"></A>
<ahref="http://blog.never-online.net/article.asp?id=83"target="_blank">clickhereforback点击返回</a>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文我们为大家介绍如何使用HTML、JavaScript与CSS来创建Lightbox,类似相册预览功能。HTML代码:Lightbox×1/42/
修改的lightbox版本是2.04版。下面是使用我们在使用lightbox来显示图片时的基本设置:复制代码代码如下: content主要是给连接加了一个re
用CSS防Lightbox实现点击小图无刷新显示大图代码代码简介:CSS的“Lightbox”是一个人见人爱的图片显示技术,她可以实现点
本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考。具体如下:lightbox类效果为了让图片居中显示而使用预加载,需要等待完全加载完毕才
Python通过微信邮件实现电脑关机,供大家参考,具体内容如下通过手机微信发送QQ邮件给sina邮箱,然后利用python的pop3定时检查sina邮箱的邮件主