Blog的縮圖

最近放blog上的都是picasaweb的縮圖，那當然就會在圖片上加一個連結，連至原圖。
不知道在哪個網站看到的（？）好像是滑鼠移到圖上時就會顯示原圖的效果！於是就來自己寫寫看:P

• 當滑鼠移到圖上時，圖片放大
• 當滑鼠移到圖外時，圖片縮小
• 但因為有時圖片會因為放大而跑位，導致放大後立即縮小又立即放大...，所以我希望可以在滑鼠指上去的一秒內，圖片保持放大狀態

首先是加入EventListener

document.addEventListener("DOMContentLoaded",function(){
},false);

IE不支援喔！
取得元素

var c=document.getElementById("Blog1");
var imgs=c.getElementsByTagName("img");

迴圈，loop每張圖片

for(var i=0;i<imgs.length;i++){
}

如果圖片沒有加上原始大小連結，則不用放大

var v=imgs[i];
if(v.parentNode.nodeName!="A")continue;

為圖片加入事件

v.onmouseover=function(){
}
v.onmouseout=function(){
}

onmouseover的事件

this.min=1  //設定mouse state，表示在圖內
if(this.s)return; //this.s是圖片是否強制放大的tag
//用this.w和this.h記錄縮圖大小
//其實應該記錄其中一個就可以了
//會按比例縮放
if(!this.w && !this.h){
  this.w=this.width;
  this.h=this.height;
}
//設定圖片的網址，並且移除圖片寬高
this.setAttribute("src",this.src.replace("s144/",""));
this.removeAttribute("width");
this.removeAttribute("height");
this.s=1; //強制放大
//一秒後清除強制放大的tag
setTimeout(function(t){
  t.s=0;
  //並且如果清除時，滑鼠不在圖上，則將圖縮小
  if(!t.min){
    t.setAttribute("width",t.w);
    t.setAttribute("height",t.h);
  }
},1000,this);

onmouseout的事件

this.min=0; //設定mouse state
if(this.s)return;
//將圖片還原成縮圖大小
this.setAttribute("width",this.w);
this.setAttribute("height",this.h);
//網址就不用再改回縮圖了，因為沒什麼意義:P

基本上，這樣就完成了。
以下給出完整代碼 //其實找部落格中的原始碼也有

document.addEventListener("DOMContentLoaded",function(){
  var c=document.getElementById("Blog1");
  var imgs=c.getElementsByTagName("img");
  for(var i=0;i<imgs.length;i++){
    var v=imgs[i];
    if(v.parentNode.nodeName!="A")continue;
    v.onmouseover=function(){
      this.min=1;
      if(this.s)return;
      if(!this.w && !this.h){
        this.w=this.width;
        this.h=this.height;
      }
      this.setAttribute("src",this.src.replace("s144/",""));
      this.removeAttribute("width");
      this.removeAttribute("height");
      this.s=1;
      setTimeout(function(t){
        t.s=0;
        if(!t.min){
          t.setAttribute("width",t.w);
          t.setAttribute("height",t.h);
        }
      },1000,this);
    };
    v.onmouseout=function(){
      this.min=0;
      if(this.s)return;
      this.setAttribute("width",this.w);
      this.setAttribute("height",this.h);
    };
  }
},false);

可以看到很明顯有個地方有bug，就是replace那裡。如果突然心血來潮不用144縮圖怎麼辦呢lol
再說吧XDDD