用滑鼠滾輪實作圖檔縮放

　　 < HTML >

　　 < HEAD >

　　 < TITLE > 動态擷取縮放圖檔的長度、寬度和顯示比例 </ TITLE >

　　 < META  NAME ="Generator"  CONTENT ="EditPlus" >

　　 < SCRIPT  LANGUAGE ="JavaScript" >

　　 <!--

　　 // 縮放對象. 調用方式: zoomObj(this)

　　 function  zoomObj(o)

　　{

　　 var  zoom  =  parseInt(o.style.zoom,  10 ) || 100 ;

　　zoom  +=  event.wheelDelta / 12 ;

　　 if  (zoom > 0 )

　　{

　　o.style.zoom = zoom + ' % ' ;

　　}

　　 return   false ;

　　}

　　 var  iOriginalWidth, iOriginalHeight;  // 存放圖檔原始長度、寬度

　　 // 動态顯示圖檔的長度、寬度和顯示比例

　　 function  dispCurrentSize()

　　{

　　 var  zoom  =  document.all.idImg.style.zoom;

　　zoom  =  eval(zoom.substring( 0 , zoom.length - 1 ));

　　 var  iWidth  =  zoom  *  document.all.idImg.width;

　　 var  iHeight  =  zoom  *  document.all.idImg.height;

　　document.all.idPicCurrentSize.innerHTML  =   " 圖檔目前大小 長： "   +  

Math.ceil(iWidth / 100 ) 

+   "  高： "   +  Math.ceil(iHeight / 100 )  +   " 　　顯示比例： "   +  

Math.ceil((iWidth 

/  iOriginalWidth))  +   " % " ;

　　}

　　 // 顯示圖檔原始長度、寬度

　　 function  dispOriginalSize(oImg)

　　{

　　iOriginalWidth  =  oImg.width;

　　iOriginalHeight  =  oImg.height;

　　document.all.idPicOriginalSize.innerHTML  =   " 圖檔原始大小 長： "   +  

iOriginalWidth 

+   "  高： "   +  iOriginalHeight;

　　document.all.idImg.style.zoom  =   " 100% " ;

　　dispCurrentSize();

　　}

　　 // -->

　　 </ SCRIPT >

　　 </ HEAD >

　　 < BODY >

　　 < img  src ="http://www.baidu.com/img/logo.gif"  ID ="idImg"  

onLoad ="dispOriginalSize(this);"  

onMouseWheel ="zoomObj(this);dispCurrentSize();" >

　　 < div  ID ="idPicOriginalSize" ></ div >< P >< P >

　　 < div  ID ="idPicCurrentSize" ></ div >< P >< P >

< br >

< br >

　　 </ BODY >

　　 </ HTML >