DIV ist an Mausereignisse gebunden und wird beim Schieben von unten nach oben erweitert.-js-Tutorial-php.cn

DIV ist an Mausereignisse gebunden und wird beim Schieben von unten nach oben erweitert.

php中世界最好的语言

Freigeben： 2018-05-15 11:14:00

Original

8247 Leute haben es durchsucht

Dieses Mal bringe ich Ihnen ein DIV, das Mausereignisse bindet und sich beim Schieben von unten nach oben ausdehnt. Was sind die Vorsichtsmaßnahmen ? Ein praktischer Fall, werfen wir einen Blick darauf.

Wenn die Maus schwebt, dehnt sich das p langsam von unten nach oben aus

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

① Zunächst wird das rote p absolut durch position:absolute und durch relative und untere Positionierung wie bottom:0px positioniert.
② 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:

Detaillierte Erläuterung der Schritte zur Implementierung der elektronischen Uhrfunktion mit jQuery

Detaillierte Erläuterung der Verwendung von Angular5-Routing-Parametern

Das obige ist der detaillierte Inhalt vonDIV ist an Mausereignisse gebunden und wird beim Schieben von unten nach oben erweitert.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!