@ 2006.12.01 , 00:04
7

很酷 CSS特效 – Dashboard

很酷 CSS特效 – Dashboard
一个简单的教程,教你如何创建一个类似 Dashboard的页面效果。做得很酷,大致来看看过程:

首先将下面的代码添加到你的 CSS文件或者是" head "标签里。

.darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7;
z-index: 20;
height: 100%;
width: 100%;
background-repeat:repeat;
position:absolute;
top: 0px;
left: 0px;
}
这段代码的基本意思是在你的 CSS里定义一个样式,它显示为暗色背景,透明度 70%,填满整个屏幕。

接着在 “body” 标签的任何地方添加下面的代码。

<div id=”darkBackgroundLayer” class=”darkenBackground”>
<script language=”javascript” type=”text/javascript”>
document.getElementsById(”darkBackgroundLayer”).style.display = “none”;
</script>
这段代码将我们的黑色背景放置到屏幕上,然后用 javascript将它隐藏起来,下面我将它放到一个事件处理器中来显示。

document.getElementsById(”darkBackgroundLayer”).style.display = “”;
这就用 javascript显示了变暗的图层。

你也可以使用 javascript象这样来显示一个不同的窗口,这种特效很容易吸引别人的注意力!

链接 | 来源

0.0
赞一个 (0)

TOTAL COMMENTS: 7+1

  1. sfufoet
    @10 years ago
    517

    原链接我这里无法访问。看到digg那边有几个评论——翻译得不好,见笑

    plasticated:
    用thickbox,你还能学会大量的技巧用来显示特殊的功能
    http://jquery.com/demo/thickbox/
    而且还能修复上面的技巧中的滚动错误。

    hadiz:
    对或者用lightbox JS
    http://www.huddletogether.com/projects/lightbox/

    Hemingrubbish
    再或者用lightbox JS 2.0
    http://www.huddletogether.com/projects/lightbox2/

    OO [0] XX [0]
  2. sfufoet
    @10 years ago
    518

    Xpiatio:
    Lightbox和Thickbox都不错,但我用的是Greybox. http://orangoo.com/labs/GreyBox/

    mindsnare:
    http://script.aculo.us/里面还有更多的AJAX例子

    OO [0] XX [0]
  3. 522

    Nice plus!

    OO [0] XX [0]
  4. 江中锅块
    @6 years ago
    654174

    惭愧,看不太明白

    OO [2] XX [0]

发表评论


24H最赞