Lightbox——新颖实用的显示图片效果 “Lightbox”是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口。文字表述显然不够明了,所以请先看一下 Lightbox 的演示页面。 如何使用? Lightbox能非常简单地应用到您的页面上。首先将lightbox.js包含到您页面的header部分: 将rel="lightbox"属性加入到任何有链接的标记里面用以激活Lightbox功能,例如: image #1 也许您注意到了上面那个例子中,当“打开”图片时会看到图片下面有一段说明文字。这是由title属性控制的。title属性是一个可选项,也就是说您可以不写,当然最好还是简短的说明一下比较好。 怎样定制? 可以使用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; } 想要产生阴影效果的话,需要准备一张半透明的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"); } lightbox.js有一句var loadingImage = 'loading.gif';它是用来控制图片完全加载之前的那个“Loading...”效果的,你可以使用任何来图片替代它。 同样的,var closeButton = 'close.gif';用以控制“关闭”按钮的图片来源。 下载 lightbox.rar下载实例 |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 13:17 , Processed in 0.119569 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.