您的位置：首页 > Web前端 > JQuery

jQuery简单实现div层的放大与缩小

2010-07-08 23:36 316 查看

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航