digest, select

yonnie / 2006.12.01 / 12:04 am

很酷 CSS特效 - Dashboard 6+

很酷 CSS特效 - Dashboard | Jandan.net
一个简单的教程，教你如何创建一个类似 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象这样来显示一个不同的窗口，这种特效很容易吸引别人的注意力！



链接 | 来源

RANDOM POSTS

RECENT POSTS

PREVIOUS POST

让科学家们也惊奇的古代计算机

NEXT POST

Sony PS3 十宗罪

本文有 6 篇评论 ↓

  1. 1 sfufoet sfufoet 说 :
    2006.12.01 8:32 am
    avatar

    原链接我这里无法访问。看到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/

  2. 2 sfufoet sfufoet 说 :
    2006.12.01 8:44 am
    avatar

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

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

  3. 3 sein sein 说 :
    2006.12.01 9:39 am
    avatar

    Nice plus！

  4. 4 ourr » links for 2006-12-01 ourr » links for 2006-12-01 说 :
    2006.12.02 7:29 am
    avatar

    [...] 煎蛋 ? 很酷 CSS特效 - Dashboard (tags: css) [...]

  5. 5 煎蛋里的全文翻译(收藏) at Skyreal’s blog 煎蛋里的全文翻译(收藏) at Skyreal’s blog 说 :
    2006.12.19 4:21 pm
    avatar

    [...] 22- 时代杂志年度人物：你 [zuofei / 1818字] 21- 10个Linux操作的好习惯 [cunni / 1287字] 20- 我们去年的现在所不知道的100件事 [skyreal / 1139字] 19- 10种最危险的玩具 [ant / 654字] 18- XNA 10 步打造自己的 Xbox 360 游戏 [yonnie / 656字] 17- Google Earth “圣诞礼物大冒险”火热进行中 [sfufoet / 575字] 16- 让Google为你生成圆角图片 [sfufoet / 642字] 15- 15 个最强 007 装备 [maple / 704字] 14- 没有阳光的意大利小城 [sein / 606字] 13- Blogger 们，是不是该停下来了 [maple / 598字] 12- 定时影片：蟹状星云的脉冲星风 [sfufoet / 545字] 11- 2006最佳电子产品 [skyreal / 606字] 10- 2007年10大最佳未来创新 [ant / 588字] 9- Windows下必不可少的30个开源软件 [skyreal / 556字] 8- Sony PS3 十宗罪 [skyreal / 573字] 7- 很酷 CSS特效 - Dashboard [yonnie / 703字] 6- 16个用得比较少的WinXP工具 [elfox / 817字] 5- 人体在真空中会爆炸吗 [sein / 991字] 4- 名人谈性 [sein / 605字] 3- NVIDIA发布最新Linux x86平台显示驱动程序 [yonnie / 520字] 2- 用 IE(!) 浏览地球 [maple / 509字] 1- 怎样控制你的梦 [elfox / 527字] [...]

  6. 6 煎蛋 » 煎蛋里的全文翻译 煎蛋 » 煎蛋里的全文翻译 说 :
    2006.12.20 9:11 am
    avatar

    [...] 22- 时代杂志年度人物：你 [zuofei / 1818字] 21- 10个Linux操作的好习惯 [cunni / 1287字] 20- 我们去年的现在所不知道的100件事 [skyreal / 1139字] 19- 10种最危险的玩具 [ant / 654字] 18- XNA 10 步打造自己的 Xbox 360 游戏 [yonnie / 656字] 17- Google Earth “圣诞礼物大冒险”火热进行中 [sfufoet / 575字] 16- 让Google为你生成圆角图片 [sfufoet / 642字] 15- 15 个最强 007 装备 [maple / 704字] 14- 没有阳光的意大利小城 [sein / 606字] 13- Blogger 们，是不是该停下来了 [maple / 598字] 12- 定时影片：蟹状星云的脉冲星风 [sfufoet / 545字] 11- 2006最佳电子产品 [skyreal / 606字] 10- 2007年10大最佳未来创新 [ant / 588字] 9- Windows下必不可少的30个开源软件 [skyreal / 556字] 8- Sony PS3 十宗罪 [skyreal / 573字] 7- 很酷 CSS特效 - Dashboard [yonnie / 703字] 6- 16个用得比较少的WinXP工具 [elfox / 817字] 5- 人体在真空中会爆炸吗 [sein / 991字] 4- 名人谈性 [sein / 605字] 3- NVIDIA发布最新Linux x86平台显示驱动程序 [yonnie / 520字] 2- 用 IE(!) 浏览地球 [maple / 509字] 1- 怎样控制你的梦 [elfox / 527字] [...]

发表你的意见 ↑