Das Beispiel in diesem Artikel beschreibt die einfache Implementierung des Erweiterungs- und Kontraktionseffekts der Webseitenebene mit JQuery. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Hier ist eine Demonstration des Ebenenerweiterungs- und Ebenenverkleinerungscodes von jquery mit Pufferanimationseffekt. Klicken Sie auf den angegebenen Text oder die Schaltfläche, um die angegebene Ebene zu erweitern, und klicken Sie erneut darauf, um die Ebene zu reduzieren Online folgen Sie bitte den Anweisungen. Wenn Sie den Code ändern müssen, vergessen Sie nicht, das neueste jQuery-Plug-in einzuführen.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Div层的收缩与展开</title>
<style>
#content {
font-size: 14px;
width: 730px;
height: 25px;
background:#FFF; line-height:25px;
border: 1px #ccc double;
overflow: hidden;
border:1px solid #99a5ab;
}
#key {
color: red;
float: right;
width:50px;
height:25px;
line-height:25px
margin:0 0 0 0;
}
</style>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type="text/javascript">
$(function(){
$("#key").toggle(function(){
$(this).html("关闭").parent().animate({height:"280px"},1000);
},function(){
$(this).html("展开").parent().animate({height:"25px"},1000);
})
})
</script>
</head>
<body>
<div id="content"> <span id="key"">展开</span><span class="fonttitle">标题</span>
<table width="700" border="1px" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</div>
</body>
</html>
Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.
