這次帶給大家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
絕對定位的,且透過相對與底部定位,如bottom:0px
。
② 底部定位固定,高度變高的時候就向上擴展了。
③ 使用jQuery的$().animate()
動畫方法,控制紅色p高度變化。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
建議閱讀:
#以上是DIV綁定滑鼠事件,滑動時由下向上展開的詳細內容。更多資訊請關注PHP中文網其他相關文章!