jquery實(shí)現(xiàn)圖片按比例縮放示例
更新時(shí)間：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(){
/* 圖片不完全按比例自動(dòng)縮小 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)寬度時(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});
});
});
</script>
<body>
<div id="content">
<div id="thumbnail" class="thumbnail" >
<img id="web" src="./midle.png"/>
</div>
</div>
</body>
</html>
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- 基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
- jquery 圖片縮放拖動(dòng)的簡(jiǎn)單實(shí)例
- 基于jquery實(shí)現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
- jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能實(shí)例
- jQuery圖片縮放插件smartZoom使用實(shí)例詳解
- JQuery 圖片延遲加載并等比縮放插件
- jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
- 基于jquery的防止大圖片撐破頁(yè)面的實(shí)現(xiàn)代碼(立即縮放)
- jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
相關(guān)文章
jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法
這篇文章主要介紹了jQuery使用fadeout實(shí)現(xiàn)元素漸隱效果的方法,實(shí)例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點(diǎn)擊改變class并toggle及toggleClass()方法定義用法的相關(guān)資料,需要的朋友可以參考下2015-12-12
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)使用到.bind()、.live()、.delegate()和.on()，有些同學(xué)會(huì)對(duì)這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關(guān)于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒。2017-08-08
jquery DOM操作 基于命令改變頁(yè)面,需要的朋友可以參考下。2010-05-05
jquery實(shí)現(xiàn)有過渡效果的tab切換
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)有過渡效果的tab切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
前些陣子寫了個(gè)插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數(shù)?，F(xiàn)在拿出來和大家分享。感覺這個(gè)插件還是蠻有用的。2010-10-10
JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件等，下面有個(gè)示例，感興趣的朋友可以參考下2014-01-01
如何選擇input框，方法貌似有很多，而在jquery中有個(gè)相當(dāng)簡(jiǎn)單不錯(cuò)的方法，在下面為大家介紹下詳細(xì)的實(shí)現(xiàn)，希望大家可以練練手哦2013-09-09
這篇文章主要介紹了JQuery遍歷json數(shù)組的3種方法,本文分別給出了使用each、for遍歷json的方法,其中for又分成兩種形式,需要的朋友可以參考下2014-11-11
jquery實(shí)現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
本文主要介紹了jquery實(shí)現(xiàn)靜態(tài)搜索功能的示例代碼，可通過輸入搜索文字進(jìn)行篩選信息。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03