快捷導(dǎo)航

jquery實(shí)現(xiàn)圖片按比例縮放示例

更新時間：2014年07月01日 09:22:18 投稿：whsnow

這篇文章主要介紹了通過jquery實(shí)現(xiàn)圖片按比例縮放,需要的朋友可以參考下

  <html> 
    <title></title> 
    <head></head> 
    <style> 
      .thumbnail{overflow:hidden;width:400px;height:240px;} 
    </style> 
    <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 
    <script language="javascript"> 
      $(function(){ 
        /* 圖片不完全按比例自動縮小 by zwwooooo */ 
          $('#content div.thumbnail img').each(function(){ 
            var x = 400; //填入目標(biāo)圖片寬度 
            var y = 240; //填入目標(biāo)圖片高度 
            var w=$(this).width(), h=$(this).height();//獲取圖片寬度、高度 
            if (w > x) { //圖片寬度大于目標(biāo)寬度時 
              var w_original=w, h_original=h; 
              h = h * (x / w); //根據(jù)目標(biāo)寬度按比例算出高度 
              w = x; //寬度等于預(yù)定寬度 
              if (h < y) { //如果按比例縮小后的高度小于預(yù)定高度時 
                w = w_original * (y / h_original); //按目標(biāo)高度重新計(jì)算寬度 
                h = y; //高度等于預(yù)定高度 
              } 
            } 
            $(this).attr({width:w,height:h}); 
          }); 
      }); 
    </script> 
    <body> 
    <div id="content"> 
      <div id="thumbnail" class="thumbnail" > 
        <img id="web" src="./midle.png"/> 
      </div> 
     </div> 
    </body> 
  </html>

您可能感興趣的文章:

相關(guān)文章

淺談jquery設(shè)置和獲得checkbox選中的問題
下面小編就為大家?guī)硪黄獪\談jquery設(shè)置和獲得checkbox選中的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
jQuery中has()方法用法實(shí)例
這篇文章主要介紹了jQuery中has()方法用法,實(shí)例分析了has()方法的功能、定義及保留包含特定后代的匹配元素的使用技巧,需要的朋友可以參考下
2015-01-01
基于jquery的時間段實(shí)現(xiàn)代碼
基于jquery的時間段實(shí)現(xiàn)代碼，需要的朋友可以參考下
2012-08-08
jquery中JSON的解析方式
用jquery解析JSON數(shù)據(jù)的方法,作為jquery異步請求的傳輸對象，jquery請求后返回的結(jié)果是json對象,這里考慮的都是服務(wù)器返回JSON形式的字符串的形式，對于利用JSONObject等插件封裝的JSON對象，與此亦是大同小異，這里不再做說明
2015-03-03
JQuery解析HTML、JSON和XML實(shí)例詳解
JQuery具有強(qiáng)大的解析數(shù)據(jù)的能力，本文詳細(xì)介紹HTML、JSON和XML格式的文件的數(shù)據(jù)如何解析
2014-03-03
jQuery過濾選擇器用法示例
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下
2016-09-09
jQuery滾動條美化插件nicescroll簡單用法示例
這篇文章主要介紹了jQuery滾動條美化插件nicescroll簡單用法,結(jié)合實(shí)例形式簡單分析了jQuery滾動條美化插件jquery.nicescroll.js的引入與使用技巧,非常簡單實(shí)用,需要的朋友可以參考下
2018-04-04
Jquery元素追加和刪除的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫query元素追加和刪除的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
利用jquery實(shí)現(xiàn)瀑布流3種案例
這篇文章主要為大家詳細(xì)介紹了利用jquery實(shí)現(xiàn)瀑布流2種案例,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
jQuery檢測鼠標(biāo)左鍵和右鍵點(diǎn)擊的方法
這篇文章主要介紹了jQuery檢測鼠標(biāo)左鍵和右鍵點(diǎn)擊的方法,涉及jQuery操作鼠標(biāo)事件的技巧,且針對IE瀏覽器具備良好的兼容性,需要的朋友可以參考下
2015-03-03