2011年7月16日 星期六

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

沒有留言:

張貼留言