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:321358parcourir
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
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!