DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> jquery圖片不完全按比例自動縮小的簡單代碼
jquery圖片不完全按比例自動縮小的簡單代碼
編輯:JavaScript綜合知識     
開發前期用自動生產 固定大小的圖片 進行 顯示,發現不能滿足,在前期的時候把保存了原圖,現在只能顯示原圖,原圖由於上傳時候沒有做任何限制所有要使用 圖片不完全按比例縮小,下面是代碼   復制代碼 代碼如下:


jQuery(document).ready(function()

/* 圖片不完全按比例自動縮小*/ 
$(window).load(function(){$('#content div.thumbnail img').each(function(){ var x = 200; 
//填入目標圖片寬度
 var y = 140; 
//填入目標圖片高度
 var w=$(this).width(), h=$(this).height();
//獲取圖片寬度、高度 
if (w > x) { 
//圖片寬度大於目標寬度時 
var w_original=w, h_original=h; h = h * (x / w);
 //根據目標寬度按比例算出高度 w =x;
 //寬度等於預定寬度 if (h < y) { 
//如果按比例縮小後的高度小於預定高度時
 w = w_original * (y /h_original); 
//按目標高度重新計算寬度 h = y;
 //高度等於預定高度 

}
$(this).attr({width:w,height:h}); }); }); });

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