Twitter通知ajax栏，他们是怎么做到的？答案

【问题标题】：Twitter notification ajax bar, how did they do it?Twitter通知ajax栏，他们是怎么做到的？
【发布时间】：2010-12-07 11:57:10
【问题描述】：

我正在尝试获得 twitter 具有的酷炫的 ajax 滑动条（它略微透明，白色）。

我尝试查看 html/css，但似乎它们动态注入了各种 DOM 层。

有人知道他们是如何实现的吗？

我真的很想学习如何做到这一点。

【问题讨论】：

如果您想查看 DOM 和样式集是什么，我绝对建议您使用 Firefox 的 Firebug 插件。您可以非常轻松地浏览 DOM、检查 CSS 属性等。
在这里检查一下，它完全是一个 jQuery 插件：jBar jQuery Notification Plugin 它的可配置性很好。

标签： asp.net jquery ajax twitter

【解决方案1】：

在 firebug 或 document.ready() 上运行此代码

$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
opacity:"0.5"
})
.appendTo("body");

你应该有一个即时通知栏...

如果您熟悉 jQuery（我假设您熟悉，因为问题是用 jquery 标记的），您可以调整 CSS 和 HTML 值以满足您的需要...

要让它向下滑动，你可以这样做：

$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
display:"none", //<-- notice this new value
opacity:"0.5"
})
.appendTo("body");
$("#notification").slideDown("slow"); //<-- this is the animation code

免责声明：只是我快速完成的一个东西，如果它在 IE 中不起作用也不会感到惊讶

【讨论】：