提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

jQuerydiv层的放大与缩小简单实现代码

代码 实现 简单 放大 缩小 jquerydiv
2023-06-13 09:14:48 时间
复制代码代码如下:

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
.content
{
border:1pxsolid#ccc;
width:440px;
overflow:hidden;
margin:10px;
}
</style>
<scripttype="text/javascript"src="jquery-1.4.2.min.js"></script>
<scripttype="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>
<divid="content"class="content">
?热?<br/>
?热?<br/>
?热?<br/>
?热?<br/>
?热?<br/>
?热?<br/>
?热?<br/>
?热?<br/>
?热?<br/>
?热?0<br/>
?热?1<br/>
?热?2<br/>
?热?3<br/>
?热?4<br/>
?热?5<br/>
?热?6<br/>
?热?7<br/>
?热?8<br/>
?热?9<br/>
?热?0<br/>
?热?1<br/>
?热?2<br/>
?热?3<br/>
?热?4<br/>
?热?5<br/>
</div>
<br/>
<spanid="bigger">放大</span>
</body>
</html>

相关文章