快捷導(dǎo)航

jQuery在頁(yè)面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法

更新時(shí)間：2015年03月20日 10:55:27 作者：令狐不聰

這篇文章主要介紹了jQuery在頁(yè)面加載時(shí)動(dòng)態(tài)修改圖片尺寸的方法,實(shí)例分析了jQuery操作圖片的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery在頁(yè)面加載時(shí)動(dòng)態(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
});

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery插件方式實(shí)現(xiàn)table查詢(xún)功能的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery插件方式實(shí)現(xiàn)table查詢(xún)功能的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-06-06
jquery實(shí)現(xiàn)左右輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)左右輪播圖效果，經(jīng)常用于購(gòu)物網(wǎng)站的首頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
功能強(qiáng)大的jquery.validate表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了功能強(qiáng)大的jquery.validate表單驗(yàn)證插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
基于JQuery實(shí)現(xiàn)滾動(dòng)到頁(yè)面底端時(shí)自動(dòng)加載更多信息
這篇文章主要介紹了基于JQuery實(shí)現(xiàn)滾動(dòng)到頁(yè)面底端時(shí)自動(dòng)加載更多信息，類(lèi)似微博，新浪新聞的評(píng)論等，都采用了這方法,需要的朋友可以參考下
2014-01-01
jQuery asp.net 用json格式返回自定義對(duì)象
客戶(hù)端用一個(gè)html頁(yè)面調(diào)用一個(gè)ashx文件（一般http處理程序），返回 json格式的自定義對(duì)象
2010-04-04
jQuery根據(jù)name屬性進(jìn)行查找的用法分析
這篇文章主要介紹了jQuery根據(jù)name屬性進(jìn)行查找的用法,結(jié)合實(shí)例形式分析了jQuery各種常見(jiàn)name屬性獲取元素的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-06-06
javascript的變量、傳值、傳址、參數(shù)之間關(guān)系
這篇文章主要介紹了javascript的變量、傳值、傳址、參數(shù)之間關(guān)系的相關(guān)資料,需要的朋友可以參考下
2015-07-07
jquery三個(gè)關(guān)閉彈出層的小示例
三個(gè)關(guān)閉彈出層的實(shí)例方法
2013-11-11
JQuery防止退格鍵網(wǎng)頁(yè)后退的實(shí)現(xiàn)代碼
有時(shí)我們需要防止退格鍵的網(wǎng)頁(yè)后退，一般情況下最好不要這么用，因?yàn)閷?duì)UX體驗(yàn)不好
2012-03-03
深入理解bootstrap框架之入門(mén)準(zhǔn)備
Bootstrap是最流行的前端開(kāi)發(fā)框架。本文涉及到bootstrap的特性介紹，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-10-10