首先下载JavaScript包: http://thecodecentral.com/wp-content/uploads/2007/08/yuilightboxwdep.zip <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:"标题" } var dataSource = ...{ id_1:...{url:"image-big.jpg", title: '测试图片'} }; //创建 Lightbox 对象: //用法: //imageBase: Lightbox.js 的路径 //dataSource: 数据源 var lightbox = new YAHOO.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>
推荐阅读
javascript 一段代码引发的思考第1/2页
在2008年的最后一天,在此祝愿大家元旦快乐!!! 郑重声明:此问题根本不是问题,现在看来就是本人知识匮乏,庸人自扰,望广大朋友勿喷!! 细心发现问题,耐心解决问题,信心面对问题. 作者:白某人 长话短说:”服务员,上代码>>>详细阅读
本文标题:JavaScript 仿关机效果的图片层
地址:http://www.17bianji.com/kaifa2/JS/29055.html
1/2 1