搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [JS]簡易縮圖目錄

[JS]簡易縮圖目錄

2008/12/19

　　這是一個簡易製作縮圖目錄的方法，其原理則是先取出圖片中的高度、寬度，再乘以縮圖的比例，因此當圖片要作縮圖時，只要在<img 裡加入onload="AlumbImg(this)"時該圖片就會縮放指定的大小，若要調整縮圖的大小，var w=200;/縮圖寬度、var h=200;//縮圖高度←修改200的部分即可。

放在＜head＞…＜/head＞之間

　function AlumbImg(tmpImg){
　　var w=200;//縮圖寬度
　　var h=200;//縮圖高度
　　var image=new Image();
　　image.src=tmpImg.src;
　　　if(image.width>0 && image.height>0){
　　　　　if(image.width/image.height>= w/h){
　　　　　　　if(image.width>w){
　　　　　　　　　tmpImg.width=w;
　　　　　　　　　tmpImg.height=(image.height*w)/image.width;
　　　　　　　　}else{
　　　　　　　　　tmpImg.width=image.width;
　　　　　　　　　tmpImg.height=image.height;
　　　　　　　　}
　　　　　}else{
　　　　　　　if(image.height>h){
　　　　　　　　　tmpImg.height=h;
　　　　　　　　　tmpImg.width=(image.width*h)/image.height;
　　　　　　　　}else{
　　　　　　　　　tmpImg.width=image.width;
　　　　　　　　　tmpImg.height=image.height;
　　　　　　　}
　　　　　}
　　　}
}
放在＜body＞…＜/body＞之間

<img src=“m001.jpg” onload=“AlumbImg(this)”>
<img src=“m002.jpg” onload=“AlumbImg(this)”>
<img src=“m003.jpg” onload=“AlumbImg(this)”>
[範例預覽]


Javascript, 縮圖目錄,