jQuery在頁面加載時動態(tài)修改圖片尺寸的方法
更新時間：2015年03月20日 10:55:27 作者：令狐不聰
這篇文章主要介紹了jQuery在頁面加載時動態(tài)修改圖片尺寸的方法,實例分析了jQuery操作圖片的技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jQuery在頁面加載時動態(tài)修改圖片尺寸的方法。分享給大家供大家參考。具體如下：
$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_list img').each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth);
$(this).css("height", height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight);
$(this).css("width", width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
相關(guān)文章
jquery插件方式實現(xiàn)table查詢功能的簡單實例
下面小編就為大家?guī)硪黄猨query插件方式實現(xiàn)table查詢功能的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細介紹了jquery實現(xiàn)左右輪播圖效果，經(jīng)常用于購物網(wǎng)站的首頁，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要為大家詳細介紹了功能強大的jquery.validate表單驗證插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
基于JQuery實現(xiàn)滾動到頁面底端時自動加載更多信息
這篇文章主要介紹了基于JQuery實現(xiàn)滾動到頁面底端時自動加載更多信息，類似微博，新浪新聞的評論等，都采用了這方法,需要的朋友可以參考下2014-01-01
客戶端用一個html頁面調(diào)用一個ashx文件（一般http處理程序），返回 json格式的自定義對象2010-04-04
這篇文章主要介紹了jQuery根據(jù)name屬性進行查找的用法,結(jié)合實例形式分析了jQuery各種常見name屬性獲取元素的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2016-06-06
javascript的變量、傳值、傳址、參數(shù)之間關(guān)系
這篇文章主要介紹了javascript的變量、傳值、傳址、參數(shù)之間關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-07-07
三個關(guān)閉彈出層的實例方法2013-11-11
JQuery防止退格鍵網(wǎng)頁后退的實現(xiàn)代碼
有時我們需要防止退格鍵的網(wǎng)頁后退，一般情況下最好不要這么用，因為對UX體驗不好2012-03-03
Bootstrap是最流行的前端開發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-10-10