Taiwan Powers Blogger

最近我在#osxchat blog上做了一個類似 Mac OS X 圖形使用者環境中的 dock 效果，這是透過 java script 完成的，作法如下：

<script type="text/javascript"> 首先要宣告這是一段 // javascript

names = new Array(11); // 宣告一個 array 存放名字
names[1] = "zonble";
names[2] = "mjhsieh";
names[3] = "gugod";
names[4] = "lukhnos";
names[5] = "mikeliu";
names[6] = "orcas";
names[7] = "julian9";
names[8] = "momizi";
names[9] = "whiteg";
names[10] = "b6s";

icon = new Array(11); // 宣告一個 array 存放圖片網址
icon[1] = "http://www.flickr.com/photos/1239483_7cccdc79b5_t.jpg"; //zonble
icon[2] = "http://www.flickr.com/photos/924056_71ce07c844_t.jpg"; //mjhsieh
icon[3] = "http://www.flickr.com/photos/1024441_30e440460f_t.jpg" //gugod
icon[4] = "http://www.flickr.com/photos/1024410_9ef37cf996_t.jpg" //lukhnos
icon[5] = "http://www.flickr.com/photos/924048_f9cd762e60_t.jpg"; //m3744 mikeliu
icon[6] = "http://www.flickr.com/photos/1024434_e442a7af22_t.jpg"; //orcas_cs
icon[7] = "http://www.flickr.com/buddyicons/25132758@N00.jpg?1100853684"; //julian
icon[8] = "http://www.flickr.com/buddyicons/24827808@N00.jpg?1100248842"; //momizi
icon[9] = "http://www.flickr.com/buddyicons/65404987@N00.jpg?1099641278"; //whiteg
icon[10] = "http://flickr.com/buddyicons/68102773@N00.jpg?1099499124"; //b6s

urls = new Array(11); // 宣告一個 array 存放每個人 blog 的網址
urls[1] = "http://zonble.twbbs.org"; //zonble
urls[2] = "http://http://apple.sysbio.info/~mjhsieh/"; //mj
urls[3] = "http://gugodl.org/"; //gogle
urls[4] = "http://luknos.org/wp/"; //lukhnos
urls[5] = "http://photozone.blogdns.org/blog/space/start"; //mikeliu
urls[6] = "http://blogs.infoecho.net/echo/"; //orcas
urls[7] = "http://homepage.mac.com/julian9/Home/Menu3.html"; //julian
urls[8] = "http://momizi.z6i.org/" //momizi
urls[9] = "http://blog.whiteg.net/" //whiteg
urls[10] = "http://b6s.blogspot.com/" //b6s

function a(a){ //這個 funtion 的用途是，讓每次滑鼠移動到某個 icon 上之後，放大張圖片以及前後兩張圖片的大小
var item = 'ouricon' + a;
var zoom = document.getElementById(item);
var itemdiv = 'icondiv' + a;
var zoomdiv = document.getElementById(itemdiv);
var itemline = 'iconline' + a;
var zoomline = document.getElementById(itemline);
zoom.style.width = "45px";
zoomdiv.style.width = "45px";
zoomline.style.display = "block";
if(a > 1) {
a1 = a -1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "40px";
zoomdiv.style.width = "45px";
}
if(a < 10) {
a1 = a + 1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "40px";
zoomdiv.style.width = "45px";
}
}

function b(a){ //在滑鼠移開的時候，還原成原始大小
var item = 'ouricon' + a;
var zoom = document.getElementById(item);
var itemdiv = 'icondiv' + a;
var zoomdiv = document.getElementById(itemdiv);
var itemline = 'iconline' + a;
var zoomline = document.getElementById(itemline);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
zoomline.style.display = "none";
if(a > 1) {
a1 = a -1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
}
if(a < 10) {
a1 = a + 1;
item = 'ouricon' + a1;
itemdiv = 'icondiv' + a1;
zoom = document.getElementById(item);
zoomdiv = document.getElementById(itemdiv);
zoom.style.width = "30px";
zoomdiv.style.width = "40px";
}
}

function dock(){ //最後，這是實際把 dock 印出來的部份，可以看到用了很多 CSS 語法
document.write('<div style=\"margin: 0 auto 0 auto; width: 440px; height: 60px; padding-right: 10px; margin-top: -35px; valign: bottom;\">');
for(i=1;i < 11; i++) {
document.write('<div style=\"display: block; width: 40px; float: right;\" id=\"icondiv'+ i + '\"><div style=\"margin:0; text-align: center;\"><a href=\"'+ urls[i] +'\"><img src=\"' + icon[i] + '\" id=\"ouricon' + i +'\" onmouseover=\"a(' + i + ')\" onmouseout=\"b(' + i + ')\" style=\"width:30px; border: 1px solid #333; margin: 0;\"/></a></div><div style=\"display:none; font-size: 9pt; font-weight: bold; margin: 0; text-align: center; color: #000; padding: 0;\" id=\"iconline' + i +'\">'+ names[i] +'</div></div>');
}
document.write('</div>');
}

</script>

您可以在修改模板的時候，把這段語法放在<head>當中，然後在 body 當中的適當位置插入：

<script type="text/javascript"> dock(); </script>

這樣就可以了。