隔壁前面桌子上堆滿著也許一輩子再被翻閱一次就該自覺受寵的書籍們的那個男子說，想要個像這個一樣的仿冒品！既然都說出口了，我也不好意思拒絕，他提供的參考資料，看起來不太適合放在flicker上面的圖們，那就自己作一個吧！

要某個程度上做到像osx的dock那樣縮放其實不難，麻煩的是想像中應該要被支援的各種標準以及事件的動作，在各個瀏覽器中並不一致。只好鄉愿地想說不過只是一個純粹好看用的功能罷了，我實在懶得把它修到完美……

例子兩個，分別在ilyagram.org和土耳其貓。明顯可見的不完美在onmouseout的事件不一定會被觸發，所以dock就沒法復原，「大大地長在那裡也還好」，安慰自己的語句真的很中聽……

完整的javascript碼如下：

<script type="text/javascript">
var org = 40;
var aft = 80;
var dockid = "photodock";
var dockimgs;
var dockdiff;
function init(){
dockdiff = aft -org;
dock = document.getElementById(dockid);
dockimgs = dock.getElementsByTagName("img");
resettonormal();
}

function getMyTarget(evt){
if(!evt) var evt = window.event;
if (evt.target) obj = evt.target;
else if (evt.srcElement) obj = evt.srcElement;

if (obj.nodeType == 3) // defeat Safari bug
obj = obj.parentNode;
return obj;
}

function imgEnlarge(evt){
obj = getMyTarget(evt);
name = obj.nodeName;
if(name!="IMG" && name !="img"){
return true;
}
currentIndex = -1;
resettonormal();

for(i=0;i if(dockimgs[i] == obj){
currentIndex = i;
break;
}
}
resize(currentIndex, aft, aft);
resize(currentIndex+1, org + dockdiff/2, org + dockdiff/2);
resize(currentIndex+2, org + dockdiff/10, org + dockdiff/10);

resize(currentIndex-1, org + dockdiff/2, org + dockdiff/2);
resize(currentIndex-2, org + dockdiff/10, org + dockdiff/10);
}

function imgNormal(evt){
obj = getMyTarget(evt);
if(obj.getAttribute("id") == dockid){
resettonormal();
}
}

function resize(idx, w, h){
if(idx < 0 || idx >= dockimgs.length) return;
var obj = dockimgs[idx];
if(obj==null) return false;
// for IE
obj.style.marginTop = “0px”;
obj.style.width = w+”px”;
obj.style.height = h+”px”;
// end for ie;
obj.setAttribute(”style”, “margin-top:0px;width:”+w+”px;”+”height:”+h+”px;”);
}

function resettonormal(){
for(i=0;i // for IE
dockimgs[i].style.marginTop = "0px";
dockimgs[i].style.width = org+"px";
dockimgs[i].style.height = org+"px";
// end for ie;
dockimgs[i].setAttribute("style", "width:"+org+"px;"+"height:"+org+"px;");
}
}
</script>

在body中加上

<body onload="init()">

要縮放的圖則是用一個div包起來….

<div id="photodock" style="padding:5px;height:80px;" onmouseover="imgEnlarge(event)" onmouseout="imgNormal(event)">
<img ..../>
.....
</div>

歡迎隨便用也請隨便改。