Javascript, 網頁設計

jQuery教學-圖片縮圖-自動縮放比例到指定區塊

梅干 2011/01/21
梅問題-jQuery教學-圖片自動縮放到指定的區塊中
  先前梅干在改版時,首頁的地方可看到有照片縮圖,為了減少製作小張圖的時間,梅干就偷懶利用PHP抓取文章第一張圖片,並再取得第一張影像的尺寸大小,再去計算縮放的比例,雖然說很方便,但卻發現每次進到首頁時,都得等待一回畫面才會顯示出來,一開始以為是主機的問題,最後把縮圖關閉後,才發現到原來是那PHP製作縮圖所造成的,為了解決此問題,梅干則改用jQuery的方式,如此一來不但可完成縮圖的夢想,二來還加快了網站的讀時間,並且梅干把它作成自動化,只要在img標籤中設定參數,就會自動處理囉!

放在<head>.....</head>之間:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
//圖片縮圖
$(window).load(function(){
	$("img").each(function(i){
		if($(this).attr("alumb")=="true"){
			//移除目前設定的影像長寬
			$(this).removeAttr('width');
			$(this).removeAttr('height');
			
			//取得影像實際的長寬
			var imgW = $(this).width();
			var imgH = $(this).height();
			
			//計算縮放比例
			var w=$(this).attr("_w")/imgW;
			var h=$(this).attr("_h")/imgH;
			var pre=1;
			if(w>h){
				pre=h;
			}else{
				pre=w;
			}
						
			//設定目前的縮放比例
			$(this).width(imgW*pre);
			$(this).height(imgH*pre);
		}
	});
});
</script>

放在<body>.....</body>之間:
<img src="sample.jpg" alumb="true" _w="300" _h="300" width="500"/>

參數設定:
alumb:是否要執行縮圖,true是要執行(若不寫為不執行)。
_w:縮放的寬度。
_h:縮放的高度。

  日後只要想套用縮圖時,只要在img後加入alumb=true,程式就會自動的處理很EZ喔!最後也要感謝好友男丁大力的相助,梅干數學不太好XD~先前計算出了一些小問題,使得每次縮放比例不太對,現在一切都正常囉!程式要寫的好,不但邏輯要好,連數學也要好才行~ㄨ~ㄨ~
[範例預覽] [範例下載]