jQuery div層的放大與縮小簡單實現(xiàn)代碼
更新時間：2013年03月28日 11:47:32 作者：
div層的放大與縮小想必大家已不是那么陌生了吧，接下來為大家詳細介紹下使用jQuery實現(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">
內容1<br />
內容2<br />
內容3<br />
內容4<br />
內容5<br />
內容6<br />
內容7<br />
內容8<br />
內容9<br />
內容10<br />
內容11<br />
內容12<br />
內容13<br />
內容14<br />
內容15<br />
內容16<br />
內容17<br />
內容18<br />
內容19<br />
內容20<br />
內容21<br />
內容22<br />
內容23<br />
內容24<br />
內容25<br />
</div>
<br />
<span id="bigger">放大</span>
</body>
</html>
您可能感興趣的文章:
- jquery實現(xiàn)input輸入框實時輸入觸發(fā)事件代碼
- js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- jquery清空textarea等輸入框實現(xiàn)代碼
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- jQuery實現(xiàn)動態(tài)添加、刪除按鈕及input輸入框的方法
- jquery實現(xiàn)textarea輸入框限制字數(shù)的方法
- Jquery動態(tài)添加輸入框的方法
- jQuery表單獲取和失去焦點輸入框提示效果的實例代碼
- 基于jquery實現(xiàn)一張圖片點擊鼠標放大再點縮小
- jQuery實現(xiàn)輸入框的放大和縮小功能示例
相關文章
昨天寫了篇通過jQuery源碼學習javascript（一），里面有一個定義對象C的方法，我早期也沒有太注意這個方面的技術細節(jié)。后來我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享2012-12-12
解析Jquery的LigerUI如何實現(xiàn)文件上傳
本篇文章是對Jquery中的LigerUI實現(xiàn)文件上傳的方法，進行了分析介紹，需要的朋友可以參考下2013-07-07
利用jquery 取得IMG src的問題，有需要的朋友可以參考下。2009-05-05
jquery控制listbox中項的移動并排序的實現(xiàn)代碼
listbox中項的移動并排序的jquery實現(xiàn)代碼，使用jquery與listbox的朋友可以參考下。2010-09-09
下面小編就為大家?guī)硪黄猨Query EasyUI 入門必看。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了如何使用Jquery動態(tài)生成二級選項列表,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-02-02
在下面的集合中，你會發(fā)現(xiàn)很多便利的 jQuery 導航插件和有用的教程，幫助你實現(xiàn)充滿吸引力的網(wǎng)站導航，讓你網(wǎng)站更有組織性和交互性2012-09-09
使用easyui從servlet傳遞json數(shù)據(jù)到前端頁面的兩種方法
這篇文章主要介紹了用easyui從servlet傳遞json數(shù)據(jù)到前端頁面的兩種方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
下面小編就為大家分享一篇jQuery中庫的引用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
.prev()方法允許我們在 DOM 樹中搜索這些元素的前一個同胞元素，并用匹配元素構造一個新的jQuery對象2014-07-07