JavaScript 仿关机效果的图片层

44424742 · 发表于 2013-2-7 15:05:11

最近发现了一用 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页：

<div style="">

<html>

<head>

//根据下载的JavaScript包修改以下的路径

<linkrel="stylesheet"type="text/css"href="js/yui/assets/skins/sam/container.css"/>

<scripttype="text/javascript"src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>

<scripttype="text/javascript"src="js/yui/dragdrop/dragdrop-min.js"></script>

<scripttype="text/javascript"src="js/yui/container/container-min.js"></script>

<scripttype="text/javascript"src="js/lightbox/Lightbox.js"></script>

<scripttype="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>

//加一个预览图片

//用法：<imgsrc="预览.jpg"id="图片ID"/>

//注意：保持图片ID和数据源ID一致

<imgsrc="image-small.jpg"id="id_1"/>

</body>

</html>

		自动登录	找回密码
密码			立即注册