L'exemple de cet article décrit l'implémentation simple de l'effet d'expansion et de contraction de la couche de page Web avec jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Voici une démonstration du code d'expansion et de réduction de calque de page Web jquery, avec des effets d'animation de tampon. Cliquez sur le texte ou le bouton spécifié pour développer le calque spécifié, puis cliquez à nouveau dessus pour réduire le calque. vu en ligne, veuillez suivre Si vous devez modifier le code, n'oubliez pas d'introduire le dernier plug-in jQuery.
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<!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>
J'espère que cet article sera utile à la conception de la programmation jquery de chacun.
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
outils de développement Python
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
