Lightbox——新颖实用的显示图片效果

Lightbox JS 原作者：Lokesh Dhakar - email

作者现已推出 Lightbox JS v2.0

演示页面:http://www.huddletogether.com/projects/lightbox2/

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。文字表述显然不够明了，所以请先看一下Lightbox的演示页面。

如何使用？

1. Lightbox能非常简单地应用到您的页面上。首先将lightbox.js包含到您页面的header部分： <script src="lightbox.js" type="text/javascript"></script>
2. 将rel="lightbox"属性加入到任何有链接的标记里面用以激活Lightbox功能，例如： <a title="my caption" href="images/image-1.jpg" rel="lightbox">image #1</a>
3. 也许您注意到了上面那个例子中，当“打开”图片时会看到图片下面有一段说明文字。这是由title属性控制的。title属性是一个可选项，也就是说您可以不写，当然最好还是简短的说明一下比较好。

怎样定制？

1. 可以使用CSS来对“图片层”进行修饰，在上面的那个示例页面中，我们采用了以下CSS代码： #lightbox{ background-color:#eee; padding: 10px; border-bottom: 2px solid #666; border-right: 2px solid #666; } #lightboxDetails{ font-size: 0.8em; padding-top: 0.4em; } #lightboxCaption{ float: left; } #keyboardMsg{ float: right; } #lightbox img{ border: none; } #overlay img{ border: none; }
2. 想要产生阴影效果的话，需要准备一张半透明的PNG图片和少许CSS。由于IE对PNG图形的糟糕支持（它不支持PNG透明）我们不得不针对它写更多的代码： #overlay{ background-image: url(overlay.png); } * html #overlay { background-color: #000; back\ground-color: transparent; background-image: url(blank.gif); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale"); }
3. lightbox.js Ҷƪл˵?
   第一页上一页1234下一页尾页
5. һƪ[asp]让你知道codepage的重要，关于多语言编码
   һƪ掌握 Ajax，第 4 部分: 利用 DOM 进行 Web 响应