jquery圖片不完全按比例自動(dòng)縮小的簡(jiǎn)單代碼
更新時(shí)間:2013年07月29日 12:05:01 作者:
開發(fā)前期用自動(dòng)生產(chǎn) 固定大小的圖片 進(jìn)行 顯示,發(fā)現(xiàn)不能滿足,在前期的時(shí)候把保存了原圖,現(xiàn)在只能顯示原圖,原圖由于上傳時(shí)候沒有做任何限制所有要使用 圖片不完全按比例縮小,下面是代碼
復(fù)制代碼 代碼如下:
jQuery(document).ready(function()
{
/* 圖片不完全按比例自動(dòng)縮小*/
$(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}); }); }); });
您可能感興趣的文章:
- jquery實(shí)現(xiàn)根據(jù)瀏覽器窗口大小自動(dòng)縮放圖片的方法
- 基于jquery實(shí)現(xiàn)等比縮放圖片
- 用jquery實(shí)現(xiàn)等比例縮放圖片效果插件
- jQuery設(shè)置圖片等比例縮小的方法
- 基于jQuery的圖片不完全按比例自動(dòng)縮小
- jquery實(shí)現(xiàn)圖片按比例縮放示例
- jquery實(shí)現(xiàn)頁(yè)面圖片等比例放大縮小功能
- 用jquery等比例控制圖片寬高的具體實(shí)現(xiàn)
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- jquery實(shí)現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
- jquery 圖片上傳按比例預(yù)覽插件集合
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- jQuery實(shí)現(xiàn)按比例縮放圖片的方法
相關(guān)文章
解決JQeury顯示內(nèi)容沒有邊距內(nèi)容緊挨著瀏覽器邊線
JQuery頁(yè)面顯示的內(nèi)容沒有邊距,內(nèi)容緊挨著瀏覽器邊線,下面有個(gè)不錯(cuò)的解決方法,大家可以嘗試下2013-12-12內(nèi)容滑動(dòng)切換效果jquery.hwSlide.js插件封裝
這篇文章主要為大家詳細(xì)介紹了jQuery開發(fā)之內(nèi)容滑動(dòng)切換效果的相關(guān)資料,jquery.hwSlide.js插件進(jìn)行封裝具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jquery選擇符快速提取web表單數(shù)據(jù)示例
遇到要重復(fù)多次同樣的事時(shí),就想找一種省時(shí)省力的方法,下面就為大家介紹下利用jquery選擇符快速提取web表單數(shù)據(jù)2014-03-03