Monday, November 13, 2006
[Blog] Random Rotating Banner Hack
這個Hack相當的棒，可以隨機在你所指定的「圖片集」中，隨機Show一張圖，用在Blog的Banner上..那就更Cool啦 ^_^，所展現的效果就在我的Blog，直接多試幾次「重新整理 F5」，就清楚了!
此功能在WordPress中已經是預設的plug-in了，藉由這個簡易的javascript，可以達成很多其它功能，像是：產生「隨機Discription」、「隨機 Background」....等等...想到什麼，就自己加吧!
以隨機Banner來說明的話，主要的作法就是利用javascript修改css style，例如原來template裡面的#header-wrapper的style:
#header-wrapper{
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}基本上，我們的主要作法就是在每次Browser要讀取你的Blog的HTML原碼時，先利用一段javascript code，產生一個同樣的background定義，用以覆寫<body>裡頭的wrapper-header的background定義，所以記得要把底下這段code「放置在<body>之後」，就行了：
<script type="text/javascript">
var banner= new Array()
banner[0]="http://photos1.blogger.com/blogger2/4171/1279/1600/kubrickheader.jpg"
banner[1]="http://chenkaie.googlepages.com/kubrickheader_1.png"
banner[2]="http://chenkaie.googlepages.com/kubrickheader_2.png"
banner[3]="http://chenkaie.googlepages.com/kubrickheader_3.png"
banner[4]="http://chenkaie.googlepages.com/kubrickheader_4.png"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header-wrapper {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>※記得上頭的"4"要一致，因為他的random產生器，填4的話，就是產生0~4這5種值!假設你只有0,1,2三張圖的話，那麼Math.round()裡頭的4就要改成2...that's all!! 若你還要隨機變換字型產色之類的動作，就再加新的document.write(...)的語法進去就ok囉!!
重要參考文獻： Freeyasoul Adventure -> Random Rotating Banner Hack
9 Comments:
February 04, 2007 5:35 PM
this is such a nice hack Kaie..
I can't understand Taiwan's language,
i just copy and paste the code..
If you have a time can you make a template base on google ajax..
February 09, 2007 5:47 PM
To arephyz:
:) this is " Freeyasoul Adventure" 's hack, thx him..^^ I stole this hack from him..ccc, if u have time try to learn Chinese, that's interesting..^^
Of cause, if I have time I would love to make one..^^
February 09, 2007 7:44 PM
你好，文章開頭所提的Hack是什麼呢 @@?
我WP裡好像沒有這個預設的plugin
還有一個問題，第二個原始碼是貼在style.css裡嗎?
貼上去之後沒有反應內XD
可能是因為沒有此Hack?
February 10, 2007 1:21 PM
To hweiwen:
hack沒什麼特別意思啦，其實就是指這個「技術、技巧、功能」之類的..意思而已。至於WP沒有這個預設的plugin唷，我沒用也不太清楚說，或許是版本不同的關系吧。第二個碼始碼應該不會是貼在那個檔裡，而且由於我沒玩過WP所以我也無法確切告知你該如何修改成WP適用的語法…真是不好意思...XD，你只要去找WP的此外掛即可，並不需自行修改唷..^^
February 23, 2007 10:49 PM
似乎只能顯示十張圖，第十一章圖(banner[10])開始就會顯示不出來...有解決之道嗎？ 謝謝。
March 28, 2007 12:15 AM
請問原來的#header-wrapper{
margin: 0;
padding: 0;
font: $pagetitlefont;
background: #e0e0e0 url(http://www.blogblog.com/tictac/top_div.gif) no-repeat 0px 0px;
}
是不動？還是刪除掉？
March 28, 2007 7:53 AM
To James:
保持不動即可 :D
June 18, 2007 1:54 AM
這個HACK真好用,謝謝你..
我裝在我的BLOG中了..^^
June 18, 2007 11:33 AM
To chitekim:
免客氣 ^_^ 拿去服用...
Post a Comment