DIV est lié aux événements de la souris et s'étend de bas en haut lors du glissement.-js tutoriel-php.cn

DIV est lié aux événements de la souris et s'étend de bas en haut lors du glissement.

php中世界最好的语言

Libérer： 2018-05-15 11:14:00

original

8350 Les gens l'ont consulté

Cette fois, je vais vous proposer un DIV qui lie les événements de la souris et se développe de bas en haut lors du glissement. DIV lie les événements de la souris et se développe de bas en haut lors du glissement. Quelles sont les précautions Ce qui suit. est un cas pratique, jetons un coup d'oeil.

Lorsque la souris flotte, le p s'étend lentement de bas en haut

<!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>

Copier après la connexion

Principe : <.>

① Tout d'abord, le p rouge est positionné de manière absolue par

position:absolute , et par un positionnement relatif et inférieur, tel que . 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
de jQuery pour contrôler le changement de hauteur du p rouge. $().animate()

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 :

Explication détaillée des étapes pour implémenter la fonction d'horloge électronique avec jQuery

Explication détaillée de la utilisation des paramètres de routage Angular5

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!