JavaScript 仿关机效果的图片层

最近发现了一用 YUI 做的 Lightbox, 只需少量的设置就能类Window关机的效果来显示图片。

http://thecodecentral.com/2007/08/17/yui-based-lightbox-revisit

首先下载JavaScript包：
http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip

新建一个HTML页：

 
 

  
  
 
    
   < 
   html 
   > 
   
 
   < 
   head 
   > 
   
//根据下载的JavaScript包修改以下的路径
 
   < 
   link 
   rel 
   ="stylesheet" 
   type 
   ="text/css" 
   href 
   ="js/yui/assets/skins/sam/container.css" 
    
   /> 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/yui/yahoo-dom-event/yahoo-dom-event.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/yui/dragdrop/dragdrop-min.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/yui/container/container-min.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/lightbox/Lightbox.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   > 
   ... 
   

//加载lightbox
init=function()...{
//制作一个数据源，含原本图片
//用法:图片ID:{url:"原本图片路径",title:"标题"}
vardataSource=...{
id_1:...{url:"image-big.jpg",title:'测试图片'}
};

//创建Lightbox对象:
//用法:
//imageBase:Lightbox.js的路径
//dataSource:数据源
varlightbox=newYAHOO.com.thecodecentral.Lightbox(...{
imageBase:'js/lightbox',
dataSource:dataSource
});
}
//这行保持原貌
YAHOO.util.Event.on(window,'load',init);
 
   </ 
   script 
   > 
   

 
   </ 
   head 
   > 
   
 
   < 
   body 
   > 
   
//加一个预览图片
//用法： 
   < 
   img 
   src 
   ="预览.jpg" 
   id 
   ="图片ID" 
   /> 
   
//注意：保持图片ID和数据源ID一致
 
   < 
   img 
   src 
   ="image-small.jpg" 
   id 
   ="id_1" 
   /> 
   
 
   </ 
   body 
   > 
   
 
   </ 
   html 
   > 
  
 
 
代码无注解：

 
 

  
  
 
   < 
   html 
   > 
   
 
   < 
   head 
   > 
   
 
   < 
   link 
   rel 
   ="stylesheet" 
   type 
   ="text/css" 
   href 
   ="js/yui/assets/skins/sam/container.css" 
    
   /> 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/yui/yahoo-dom-event/yahoo-dom-event.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/yui/dragdrop/dragdrop-min.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/yui/container/container-min.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   src 
   ="js/lightbox/Lightbox.js" 
   ></ 
   script 
   > 
   
 
   < 
   script 
   type 
   ="text/javascript" 
   > 
   

init 
   = 
    
   function 
   (){
 
   var 
   dataSource 
   = 
   {
id_1:{url: 
   " 
   image-big.jpg 
   " 
   ,title: 
   ' 
   测试图片 
   ' 
   }
};

 
   var 
   lightbox 
   = 
    
   new 
   YAHOO.com.thecodecentral.Lightbox({
imageBase: 
   ' 
   js/lightbox 
   ' 
   ,
dataSource:dataSource
});
}

YAHOO.util.Event.on(window, 
   ' 
   load 
   ' 
   ,init);
 
   </ 
   script 
   > 
   

 
   </ 
   head 
   > 
   
 
   < 
   body 
   > 
   
 
   < 
   img 
   src 
   ="image-small.jpg" 
   id 
   ="id_1" 
   /> 
   
 
   </ 
   body 
   > 
   
 
   </ 
   html 
   > 
  
 
 

测试地址：
http://test.thecodecentral.com/demos/lightboxrev/lightbox.html