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

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

放在<head>.....</head>之間:
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<script type="text/javascript" src="http://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>之間:
1
<img src="sample.jpg" alumb="true" _w="300" _h="300" width="500"/>

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

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




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 6 梅留言

  • 第6梅
    Vicky 說道:

    請問您, 我試用了您分享的東西, 真的很好用耶, 只是目前只有一個小小的問題, 就是照片若直的, 我放在梅干大的區塊裡, 照片自動變成橫式, 不知何原因?

    回應:
    是被旋轉90度嗎?
    還是被拉成橫向
  • 第5梅
    蘇菲 說道:

    想請問一下,
    可以套用在大小不一樣的圖片?
    還是只能用相同規格的?

  • 第4梅
    joey 說道:

    不好意思 請問這個代碼是要放到什麼檔案
    對不起一點都不熟

    回應:
    照梅干的方式,放到指定的區塊中就可以了