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
JavaScript 仿关机效果的图片层

你可能感兴趣的:(JavaScript)