Twitter通知阿賈克斯吧，他們是怎麼做到的？

我試圖讓那個很酷，ajax滑動欄，微博有（它稍微透明，白色）。Twitter通知阿賈克斯吧，他們是怎麼做到的？

我試着看着html/css，但它似乎動態地注入了各種DOM層。

有人知道他們是如何實現它嗎？

我真的很想學習如何做到這一點。

2009-10-16 mrblah

工作，我肯定會建議得到Firefox的Firebug插件。您可以輕鬆瀏覽DOM，檢查CSS屬性等。 – 2009-10-16 20:01:49

在這裏檢查，這正是作爲一個jQuery插件：[jBar jQuery通知插件]（http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/）它很好地配置。 – cssmaniac 2009-10-29 02:24:37

運行這段代碼在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

免責聲明：只是一個快速的東西我颳起了，也不會感到驚訝，如果如果你想看看DOM和樣式集是它沒有在IE

來源

2009-10-17 01:52:40 ekhaled

Twitter通知阿賈克斯吧，他們是怎麼做到的？

回答

相關問題