Heim > Artikel > Web-Frontend > DIV ist an Mausereignisse gebunden und wird beim Schieben von unten nach oben erweitert.
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!