DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 按比例微縮圖片的一段小小的JS代碼
按比例微縮圖片的一段小小的JS代碼
編輯:關於JavaScript     
         自己寫的一個非常簡單的圖片微縮JS代碼,當然網上有很多類似的代碼,在此確實是獻丑了。
         主要方法寫在SetImgSize.js裡面 SetImgSize.js
 1 //智能微縮圖片JS方法
 2 //參數:imgID(圖片的標識ID)
 3 //參數:maxWidth(圖片的最大寬度,值為0則表示不限制寬度)
 4 //參數:maxHeight(圖片的最大高度,值為0則表示不限制高度)
 5 function setImgSize(imgID,maxWidth,maxHeight)
 6 {
 7     var img = document.images[imgID];
 8     if(maxWidth < 1)
 9     {
10         if(img.height > maxHeight)
11         {
12             img.height = maxHeight;
13         }
14         return true;
15     }
16     if(maxHeight < 1)
17     {
18         if(img.width > maxWidth)
19         {
20             img.width = maxWidth;
21         }
22         return true;
23     }
24     if(img.height > maxHeight || img.width > maxWidth)
25     {
26         if((img.height / maxHeight) > (img.width / maxWidth))
27         {
28             img.height = maxHeight;
29         }
30         else
31         {
32             img.width = maxWidth;
33         }
34         return true;
35     }
36 }         功能實現原理是在圖片加載完畢後(onload事件)用JS實現微縮。
         下面是一個測試用的文件test.htm test.htm
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" >
 3 <head>
 4     <title>測試</title>
 5     <script language="javascript" type="text/javascript" src="setImgSize.js"></script>
 6 </head>
 7 <body>
 8     限定了寬度150px
 9 &nbs

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved