jQuery div層的放大與縮小簡單實(shí)現(xiàn)代碼

更新時(shí)間：2013年03月28日 11:47:32 作者：

div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細(xì)介紹下使用jQuery實(shí)現(xiàn)，感興趣的各位可以參考下哈，希望可以幫助到你

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 
.content 
{ 
border: 1px solid #ccc; 
width: 440px; 
overflow: hidden; 
margin: 10px; 
} 
</style> 
<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
if ($('#content').height() > 400) 
$('#content').height(400); 
$('#bigger').toggle(function() { 
$('#content').height($('#content').height() + 100); 
$('#bigger').html('縮小'); 
}, function() { 
$('#content').height($('#content').height() - 100); 
$('#bigger').html('放大'); 
}) 
}); 
</script> 
</head> 
<body> 
<div id="content" class="content"> 
內(nèi)容1<br /> 
內(nèi)容2<br /> 
內(nèi)容3<br /> 
內(nèi)容4<br /> 
內(nèi)容5<br /> 
內(nèi)容6<br /> 
內(nèi)容7<br /> 
內(nèi)容8<br /> 
內(nèi)容9<br /> 
內(nèi)容10<br /> 
內(nèi)容11<br /> 
內(nèi)容12<br /> 
內(nèi)容13<br /> 
內(nèi)容14<br /> 
內(nèi)容15<br /> 
內(nèi)容16<br /> 
內(nèi)容17<br /> 
內(nèi)容18<br /> 
內(nèi)容19<br /> 
內(nèi)容20<br /> 
內(nèi)容21<br /> 
內(nèi)容22<br /> 
內(nèi)容23<br /> 
內(nèi)容24<br /> 
內(nèi)容25<br /> 
</div> 
<br /> 
<span id="bigger">放大</span> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

通過jQuery源碼學(xué)習(xí)javascript(二)
昨天寫了篇通過jQuery源碼學(xué)習(xí)javascript（一），里面有一個(gè)定義對(duì)象C的方法，我早期也沒有太注意這個(gè)方面的技術(shù)細(xì)節(jié)。后來我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享
2012-12-12
解析Jquery的LigerUI如何實(shí)現(xiàn)文件上傳
本篇文章是對(duì)Jquery中的LigerUI實(shí)現(xiàn)文件上傳的方法，進(jìn)行了分析介紹，需要的朋友可以參考下
2013-07-07
jquery img src 獲取實(shí)現(xiàn)代碼
利用jquery 取得IMG src的問題，有需要的朋友可以參考下。
2009-05-05
jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
listbox中項(xiàng)的移動(dòng)并排序的jquery實(shí)現(xiàn)代碼，使用jquery與listbox的朋友可以參考下。
2010-09-09
jQuery EasyUI 入門必看
下面小編就為大家?guī)硪黄猨Query EasyUI 入門必看。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表
這篇文章主要介紹了如何使用Jquery動(dòng)態(tài)生成二級(jí)選項(xiàng)列表,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-02-02
推薦40個(gè)簡單的 jQuery 導(dǎo)航插件和教程(下篇)
在下面的集合中，你會(huì)發(fā)現(xiàn)很多便利的 jQuery 導(dǎo)航插件和有用的教程，幫助你實(shí)現(xiàn)充滿吸引力的網(wǎng)站導(dǎo)航，讓你網(wǎng)站更有組織性和交互性
2012-09-09
使用easyui從servlet傳遞json數(shù)據(jù)到前端頁面的兩種方法
這篇文章主要介紹了用easyui從servlet傳遞json數(shù)據(jù)到前端頁面的兩種方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
jQuery中庫的引用方法
下面小編就為大家分享一篇jQuery中庫的引用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
使用jquery prev()方法找到同級(jí)的前一個(gè)元素
.prev()方法允許我們?cè)?DOM 樹中搜索這些元素的前一個(gè)同胞元素，并用匹配元素構(gòu)造一個(gè)新的jQuery對(duì)象
2014-07-07