Maison > Article > interface Web > Comment utiliser jQuery pour implémenter un DIV qui répond au glissement de la souris et s'étend de bas en haut

Comment utiliser jQuery pour implémenter un DIV qui répond au glissement de la souris et s'étend de bas en haut

php中世界最好的语言original: 2018-06-02 10:00:321409parcourir

Cette fois, je vais vous montrer comment utiliser jQuery pour implémenter un DIV qui se développe de bas en haut en réponse à un survol de la souris. Quelles sont les précautions et voici la pratique réelle. jetez un œil au cas.

2. Code

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery响应鼠标实现p由下向上展开</title>
<style type="text/css">
  .big{position:relative; width:234px; height:300px; background:#ccc}
  .show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
 {
  $(".big").hover(function () {
    $(".show").stop(true,true).animate({height:"70px"});
  }, function () {
    $(".show").stop(true,true).animate({height:"0px"});
  });
});
</script>
</head>
<body>
  <!--灰色的p-->
  <p class="big">
    <!--红色的p-->
    <p class="show"></p>
  </p>
</body>
</html>

Principe :

① Tout d'abord, le p rouge est passé position:absolute est positionné de manière absolue , et est positionné par rapport au bas, comme bottom:0px.
② Le positionnement inférieur est fixe et s'étend vers le haut lorsque la hauteur devient plus élevée.
③ Utilisez la méthode d'animation $().animate() de jQuery pour contrôler le changement de hauteur du p rouge.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse d'un exemple de fichier journal de sortie Node.js+console

Comment utiliser jQuery pour obtenir la souris over La grande photo correspondante s'affiche sur la petite photo du produit

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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 js pour déterminer que la zone de saisie ne peut pas être un espace ou une valeur nulle ?Article suivant：Comment utiliser js pour déterminer que la zone de saisie ne peut pas être un espace ou une valeur nulle ?

Articles Liés

Voir plus