JavaScript 仿关机效果的图片层

现在的位置: 首页 > 综合 > 正文

JavaScript 仿关机效果的图片层

2013年09月18日 ⁄ 综合 ⁄ 共 2076字 ⁄ 字号小中大 ⁄ 评论关闭

最近发现了一用 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:"标题" }
  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>


测试地址：
http://test.thecodecentral.com/demos/lightboxrev/lightbox.html