Heim > Artikel > Web-Frontend > jquery implementiert einfach die Erweiterungs- und Kontraktionseffekte der Webseite layer_jquery

jquery implementiert einfach die Erweiterungs- und Kontraktionseffekte der Webseite layer_jquery

WBOYOriginal: 2016-05-16 15:46:211226Durchsuche

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie Javascript, um den Texteffekt anzuzeigen, wenn die Maus über die Fähigkeiten image_javascript bewegt wirdNächster Artikel：So verwenden Sie Javascript, um den Texteffekt anzuzeigen, wenn die Maus über die Fähigkeiten image_javascript bewegt wird

In Verbindung stehende Artikel

Mehr sehen