您的位置: 首页  >  文章  >  JavaScript 仿关机效果的图片层

JavaScript 仿关机效果的图片层

分类: 文章 • 2025-03-29 14:32:57
最近发现了一用 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页：

JavaScript 仿关机效果的图片层<html>
JavaScript 仿关机效果的图片层<head>
JavaScript 仿关机效果的图片层//根据下载的JavaScript包修改以下的路径
JavaScript 仿关机效果的图片层<linkrel="stylesheet"type="text/css"href="js/yui/assets/skins/sam/container.css"/>
JavaScript 仿关机效果的图片层<scripttype="text/javascript"src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
JavaScript 仿关机效果的图片层<scripttype="text/javascript"src="js/yui/dragdrop/dragdrop-min.js"></script>
JavaScript 仿关机效果的图片层<scripttype="text/javascript"src="js/yui/container/container-min.js"></script>
JavaScript 仿关机效果的图片层<scripttype="text/javascript"src="js/lightbox/Lightbox.js"></script>
JavaScript 仿关机效果的图片层JavaScript 仿关机效果的图片层<scripttype="text/javascript">...
JavaScript 仿关机效果的图片层
JavaScript 仿关机效果的图片层//加载lightbox
JavaScript 仿关机效果的图片层JavaScript 仿关机效果的图片层init=function()...{
JavaScript 仿关机效果的图片层//制作一个数据源，含原本图片
JavaScript 仿关机效果的图片层//用法:图片ID:{url:"原本图片路径",title:"标题"}
JavaScript 仿关机效果的图片层JavaScript 仿关机效果的图片层vardataSource=...{
JavaScript 仿关机效果的图片层JavaScript 仿关机效果的图片层id_1:...{url:"image-big.jpg",title:'测试图片'}
JavaScript 仿关机效果的图片层};
JavaScript 仿关机效果的图片层
JavaScript 仿关机效果的图片层//创建Lightbox对象:
JavaScript 仿关机效果的图片层//用法:
JavaScript 仿关机效果的图片层//imageBase:Lightbox.js的路径
JavaScript 仿关机效果的图片层//dataSource:数据源
JavaScript 仿关机效果的图片层JavaScript 仿关机效果的图片层varlightbox=newYAHOO.com.thecodecentral.Lightbox(...{
JavaScript 仿关机效果的图片层imageBase:'js/lightbox',
JavaScript 仿关机效果的图片层dataSource:dataSource
JavaScript 仿关机效果的图片层});
JavaScript 仿关机效果的图片层}
JavaScript 仿关机效果的图片层//这行保持原貌
JavaScript 仿关机效果的图片层YAHOO.util.Event.on(window,'load',init);
JavaScript 仿关机效果的图片层</script>
JavaScript 仿关机效果的图片层
JavaScript 仿关机效果的图片层</head>
JavaScript 仿关机效果的图片层<body>
JavaScript 仿关机效果的图片层//加一个预览图片
JavaScript 仿关机效果的图片层//用法：<imgsrc="预览.jpg"id="图片ID"/>
JavaScript 仿关机效果的图片层//注意：保持图片ID和数据源ID一致
JavaScript 仿关机效果的图片层<imgsrc="image-small.jpg"id="id_1"/>
JavaScript 仿关机效果的图片层</body>
JavaScript 仿关机效果的图片层</html>

代码无注解：
<html>
<head>
<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">

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

varlightbox=newYAHOO.com.thecodecentral.Lightbox({
imageBase:'js/lightbox',
dataSource:dataSource
});
}

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

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


测试地址：
http://test.thecodecentral.com/demos/lightboxrev/lightbox.html
JavaScript 仿关机效果的图片层

相关推荐