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页：
<div style="">http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<html>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<head>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif//根据下载的JavaScript包修改以下的路径
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<linkrel="stylesheet"type="text/css"href="js/yui/assets/skins/sam/container.css"/>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<scripttype="text/javascript"src="js/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<scripttype="text/javascript"src="js/yui/dragdrop/dragdrop-min.js"></script>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<scripttype="text/javascript"src="js/yui/container/container-min.js"></script>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<scripttype="text/javascript"src="js/lightbox/Lightbox.js"></script>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedBlock.gif<scripttype="text/javascript">...
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//加载lightbox
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifinit=function()...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//制作一个数据源，含原本图片
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//用法:图片ID:{url:"原本图片路径",title:"标题"}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifvardataSource=...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifid_1:...{url:"image-big.jpg",title:'测试图片'}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif};
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//创建Lightbox对象:
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//用法:
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//imageBase:Lightbox.js的路径
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//dataSource:数据源
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockStart.gifhttp://images.csdn.net/syntaxhighlighting/OutliningIndicators/ContractedSubBlock.gifvarlightbox=newYAHOO.com.thecodecentral.Lightbox(...{
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifimageBase:'js/lightbox',
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gifdataSource:dataSource
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif});
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedSubBlockEnd.gif}
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/InBlock.gif//这行保持原貌
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/ExpandedBlockEnd.gifYAHOO.util.Event.on(window,'load',init);
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif</script>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif</head>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<body>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif//加一个预览图片
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif//用法：<imgsrc="预览.jpg"id="图片ID"/>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif//注意：保持图片ID和数据源ID一致
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif<imgsrc="image-small.jpg"id="id_1"/>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif</body>
http://images.csdn.net/syntaxhighlighting/OutliningIndicators/None.gif</html>
页:
[1]