Heim > Artikel > Web-Frontend > So implementieren Sie mit jQuery ein DIV, das auf das Bewegen der Maus reagiert und sich von unten nach oben ausdehnt
So implementieren Sie mit jQuery ein DIV, das auf das Bewegen der Maus reagiert und sich von unten nach oben ausdehnt
- php中世界最好的语言Original
- 2018-06-02 10:00:321357Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie mit jQuery ein DIV implementieren, das sich als Reaktion auf eine Mausbewegung von unten nach oben ausdehnt. Was sind die Vorsichtsmaßnahmen und das Folgende ist die tatsächliche Praxis Schauen Sie sich den Fall an.
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>
Prinzip:
① Zuerst wird das rote p übergeben durch position:absoluteAbsolute Positionierung und durch relative und untere Positionierung, wie z. B. bottom:0px.
② Die untere Positionierung ist fixiert und erweitert sich nach oben, wenn die Höhe höher wird.
③ Verwenden Sie die Animationsmethode $().animate() von jQuery, um die Höhenänderung des roten p zu steuern.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Beispielanalyse der Node.js+Konsolen-Ausgabeprotokolldatei
Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit jQuery ein DIV, das auf das Bewegen der Maus reagiert und sich von unten nach oben ausdehnt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!