搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. jQuery教學－圖片縮圖-自動縮放比例到指定區塊

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

2011/01/21

梅問題-jQuery教學-圖片自動縮放到指定的區塊中

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

放在<head>…..</head>之間：

<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&gt;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~先前計算出了一些小問題，使得每次縮放比例不太對，現在一切都正常囉！程式要寫的好，不但邏輯要好，連數學也要好才行～ㄨ~ㄨ~

[範例預覽] [範例下載]


jqeury教學, jq圖片縮圖, 圖片縮圖,