JavaScript 經典代碼（14）

<script language="JavaScript1.2">
/*
 This following code are designed and writen by Windy_sk <windy_sk@126.com>
 You can use it freely, but u must held all the copyright items!
*/
function Modi_Img(img,mode,the_num){
 try{
  if(img.tagName.toLowerCase() != "img") return;
 }catch(e){
  return;
 }
 if(mode!=3 && !/\d+(\.\d+)?/.test(the_num)) return;
 if(img.readyState=="complete"){
  img.style.height = "";
  img.style.width  = "";
  var org_w = img.offsetWidth;
  var org_h = img.offsetHeight;
  if(mode==3){
   img.style.width  = 10;
   img.style.height = 10;
   var the_parent = img.offsetParent;
   if(the_num==null){
    if(the_parent.offsetWidth/org_w > the_parent.offsetHeight/org_h){
     the_num = the_parent.offsetHeight;
     mode = 1;
    }else{
     the_num = the_parent.offsetWidth;
     mode = 0;
    }
   }else{
    img.style.width  = the_parent.offsetWidth;
    img.style.height = the_parent.offsetHeight;
   }
  }
  switch(mode){
   case 0: // zoom by width
    img.style.height = org_h*the_num/org_w;
    img.style.width  = the_num;
    break;
   case 1: // zoom by height
    img.style.width  = org_w*the_num/org_h;
    img.style.height = the_num;
    break;
   case 2: // zoom by rate
    img.style.width  = org_w*the_num;
    img.style.height = org_h*the_num;
    break;
   case 3: // zoom to fill the container
    break;
   default:
    img.style.width  = org_w;
    img.style.height = org_h;
  }
  img.alt = "";
  img.alt += "檔案：" + img.src;
  img.alt += '\n大小：' + img.fileSize + '位元組';
  img.alt += "\n寬：" + img.offsetWidth;
  img.alt += '\n高：' + img.offsetHeight;
 }
}

function zoom_show(obj,rate){
 if(!event.ctrlKey){
  obj.style.width = parseInt(obj.style.width)*(1+rate);
  obj.style.height = parseInt(obj.style.height)*(1+rate);
 }else{
  obj.style.width = parseInt(obj.style.width)/(1+rate);
  obj.style.height = parseInt(obj.style.height)/(1+rate);
 }
 Modi_Img(obj.firstChild,3);
}
</script>
點擊放大，按住 ctrl 點擊縮小<br>
<div style="width:150px; height:100px; border:black 1px solid; margin:0px; padding: 0px" onclick="zoom_show(this,0.2)" onselectstart="return false">
<img id=test src="http://www.iecn.net/forum/images/iecn/logo.gif" onreadystatechange="Modi_Img(this,3)"></div>