ホームページ > 記事 > ウェブフロントエンド > DIV はマウス イベントにバインドされており、スライドすると下から上に展開されます。
今回はDIVにマウスイベントをバインドしてスライド時に下から上に展開する方法についての注意事項をお送りします。
マウスが浮くと、p は下から上にゆっくりと拡大します
<!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>
原理:
① まず、赤い p が position:absolute
絶対配置 position:absolute
绝对定位的,且通过相对与底部定位,如bottom:0px
。
② 底部定位固定,高度变高的时候就向上扩展了。
③ 使用jQuery的$().animate()
、および bottom:0px
などの相対および下部配置による。
③ jQuery の $().animate()
アニメーション メソッドを使用して、赤い p の高さの変化を制御します。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jQuery を使用して電子時計機能を実装する手順の詳細な説明
Angular5 ルーティング パラメーターの使用の詳細な説明
以上がDIV はマウス イベントにバインドされており、スライドすると下から上に展開されます。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。