So implementieren Sie mit jQuery ein DIV, das auf das Bewegen der Maus reagiert und sich von unten nach oben ausdehnt-js-Tutorial-php.cn

So implementieren Sie mit jQuery ein DIV, das auf das Bewegen der Maus reagiert und sich von unten nach oben ausdehnt

php中世界最好的语言

Freigeben： 2018-06-02 10:00:32

Original

1438 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

So bedienen Sie jQuery, um die Maus zu erreichen über Das entsprechende große Bild wird auf dem kleinen Bild des Produkts angezeigt

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!