jQuery div层的放大与缩小简单实现代码
jQuery div层的放大与缩小简单实现代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:.content{border:1pxsolid#ccc;width:440px;overflow:hidden;marg...

复制代码 代码如下:

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

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

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类