基于jQuery的圖片不完全按比例自動(dòng)縮小
舉例來(lái)說(shuō)
第一種情況:如圖片大小為 600×350,顯示區(qū)域大小為 200×140,如果圖片根據(jù)目標(biāo)寬度(200)按比例縮放后大小變成 116,那么顯示在 200×140 就會(huì)很難看。如下圖左
第二種情況:剛好相反,如圖片大小為400×400,顯示區(qū)域同樣是200×140,如果圖片根據(jù)目標(biāo)高度(140)按比例縮放后大小變成 140,即 140×140,同樣難看。如下圖右
這時(shí)用 jQuery 獲取圖片大小再判斷處理一下就稍微好點(diǎn):如第一種情況按140高度算出寬度 140×600/350=240,然后圖片按240×140顯示,多余部分用 css 的 overflow:hidden 隱藏。
下面是我的處理方法:(注意 - 這里所說(shuō)的是原圖片寬高都大于目標(biāo)顯示框大小的情況下——所以才叫縮小)
Demo 》這里
Html 部分
假如顯示區(qū)域的 class 為 thumbnail
<div id="content">
<div class="thumbnail"><img src="" alt="" /></div>
</div>
css 部分
.thumbnail{overflow:hidden;width:200px;height:140px;}
jQuery 部分
1. 當(dāng)然是先掛 jQuery 庫(kù)了,怎樣掛自行Google、百度
2. 核心代碼
jQuery(document).ready(function(){ /* 圖片不完全按比例自動(dòng)縮小 by zwwooooo */ $(window).load(function(){ $('#content div.thumbnail img').each(function(){ var x = 200; //填入目標(biāo)圖片寬度 var y = 140; //填入目標(biāo)圖片高度 var w=$(this).width(), h=$(this).height();//獲取圖片寬度、高度 if (w > x) { //圖片寬度大于目標(biāo)寬度時(shí) var w_original=w, h_original=h; h = h * (x / w); //根據(jù)目標(biāo)寬度按比例算出高度 w = x; //寬度等于預(yù)定寬度 if (h < y) { //如果按比例縮小后的高度小于預(yù)定高度時(shí) w = w_original * (y / h_original); //按目標(biāo)高度重新計(jì)算寬度 h = y; //高度等于預(yù)定高度 } } $(this).attr({width:w,height:h}); }); }); });
適用場(chǎng)所:固定大小的圖片顯示區(qū)域,如縮略圖。
折騰完。
下面推薦個(gè)內(nèi)容頁(yè)面中常用圖片大小控制代碼:
<script type="text/javascript"> $(window).load(function() { $(".cont img").each( function() { var maxwidth = 800; if ($(this).width() > maxwidth) { $(this).width(maxwidth); } }); }); </script>
代碼不用解釋,值得注意的是兩個(gè)地方:
第一:$(window).load(function() {
聲明事件的部分使用$(window).load,不能使用$(document).ready。
我在百度和iteye網(wǎng)站看到有相關(guān)的文章,方法都是錯(cuò)誤的。根本不起作用。
第二:$(".cont img").each( function()
這里是.each( function() { .... }),each在這里是對(duì)指定的圖片集合對(duì)象逐一調(diào)用下面的方法。
這種方法兼容大部分的瀏覽器,效果也很便捷。
個(gè)人感覺(jué)這種方法比較順手,另外,可以拓展為縮略圖的控制方法。
- 基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- 基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
- jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
- jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
- JQuery控制圖片由中心點(diǎn)逐漸放大效果
- jQuery左右滾動(dòng)支持圖片放大縮略圖圖片輪播代碼分享
- jQuery設(shè)置圖片等比例縮小的方法
- jQuery實(shí)現(xiàn)滾動(dòng)鼠標(biāo)放大縮小圖片的方法(附demo源碼下載)
- jQuery實(shí)現(xiàn)的點(diǎn)擊圖片居中放大縮小功能示例
相關(guān)文章
scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示(zepto.js)
這篇文章主要為大家詳細(xì)介紹了scroll事件實(shí)現(xiàn)監(jiān)控滾動(dòng)條并分頁(yè)顯示示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Javacript實(shí)現(xiàn)顏色梯度變化和漸變的效果代碼
用js對(duì)導(dǎo)航欄的顏色做了梯度的變化處理,通過(guò)處理..獲取兩種顏色在變化時(shí)的各種顏色字符串,并且字符串的個(gè)數(shù),即獲取的頻率可以調(diào)節(jié)2013-05-05javascript 處理HTML元素必須避免使用的一種方法
我們?cè)诰帉懬芭_(tái)頁(yè)面的時(shí)候,可能經(jīng)常會(huì)用到“javascript+數(shù)據(jù)”生成頁(yè)面元素的方法,但當(dāng)我們要處理的數(shù)據(jù)量較大,導(dǎo)致頁(yè)面需要展現(xiàn)過(guò)多的控件的時(shí)候,頁(yè)面的響應(yīng)速度也會(huì)直線下降2009-07-07JavaScript 網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序
這篇文章主要介紹了JavaScript 網(wǎng)頁(yè)中實(shí)現(xiàn)一個(gè)計(jì)算當(dāng)年還剩多少時(shí)間的倒數(shù)計(jì)時(shí)程序,需要的朋友可以參考下2017-01-01Java與JavaScript中判斷兩字符串是否相等的區(qū)別
這篇文章主要介紹了Java與JavaScript中判斷兩字符串是否相等的區(qū)別,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03JavaScript中的undefined學(xué)習(xí)總結(jié)
這篇文章主要是對(duì)JavaScript中的undefined進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11