recherche

Maison >interface Web >js tutoriel >jquery implémente simplement les effets d'expansion et de contraction de la page Web layer_jquery

jquery implémente simplement les effets d'expansion et de contraction de la page Web layer_jquery

WBOY
WBOYoriginal
2016-05-16 15:46:211277parcourir

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.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser javascript pour afficher l'effet de texte lorsque la souris est déplacée sur les compétences image_javascriptArticle suivant：Comment utiliser javascript pour afficher l'effet de texte lorsque la souris est déplacée sur les compétences image_javascript

Articles Liés

Voir plus