suchen

Heim >Web-Frontend >js-Tutorial >DIV ist an Mausereignisse gebunden und wird beim Schieben von unten nach oben erweitert.

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

php中世界最好的语言
php中世界最好的语言Original
2018-05-15 11:14:008319Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Schritte zum Zusammenführen und Komprimieren von CSS-Dateien mit r.jsNächster Artikel：Ausführliche Erläuterung der Schritte zum Zusammenführen und Komprimieren von CSS-Dateien mit r.js

In Verbindung stehende Artikel

Mehr sehen