jquery實現圖片按比例縮放示例
更新時間：2014年07月01日 09:22:18 投稿：whsnow
這篇文章主要介紹了通過jquery實現圖片按比例縮放,需要的朋友可以參考下
<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; //填入目標圖片寬度
var y = 240; //填入目標圖片高度
var w=$(this).width(), h=$(this).height();//獲取圖片寬度、高度
if (w > x) { //圖片寬度大于目標寬度時
var w_original=w, h_original=h;
h = h * (x / w); //根據目標寬度按比例算出高度
w = x; //寬度等于預定寬度
if (h < y) { //如果按比例縮小后的高度小于預定高度時
w = w_original * (y / h_original); //按目標高度重新計算寬度
h = 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使用fadeout實現元素漸隱效果的方法,實例分析了jQuery中fadeout方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery點擊改變class并toggle及toggleClass()方法定義用法
這篇文章主要介紹了jQuery點擊改變class并toggle及toggleClass()方法定義用法的相關資料,需要的朋友可以參考下2015-12-12
Jquery中.bind()、.live()、.delegate()和.on()之間的區(qū)別詳解
在我們日常開發(fā)中經常會使用到.bind()、.live()、.delegate()和.on()，有些同學會對這四者存在一些疑慮，所以下面這篇文章主要給大家介紹了關于Jquery中.bind()、.live()、.delegate()和.on()之間區(qū)別的相關資料，需要的朋友可以參考借鑒。2017-08-08
jquery DOM操作 基于命令改變頁面,需要的朋友可以參考下。2010-05-05
這篇文章主要為大家詳細介紹了jquery實現有過渡效果的tab切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
前些陣子寫了個插件目的就是能夠像.net 的 Requst.QuerySting["param"]那樣獲取地址欄參數?，F在拿出來和大家分享。感覺這個插件還是蠻有用的。2010-10-10
JQuery文本改變觸發(fā)事件如聚焦事件、失焦事件等，下面有個示例，感興趣的朋友可以參考下2014-01-01
如何選擇input框，方法貌似有很多，而在jquery中有個相當簡單不錯的方法，在下面為大家介紹下詳細的實現，希望大家可以練練手哦2013-09-09
這篇文章主要介紹了JQuery遍歷json數組的3種方法,本文分別給出了使用each、for遍歷json的方法,其中for又分成兩種形式,需要的朋友可以參考下2014-11-11
本文主要介紹了jquery實現靜態(tài)搜索功能的示例代碼，可通過輸入搜索文字進行篩選信息。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03