jQuery用div以滑动方式展开和收起代码实例
以滑动方式展现和收缩一个div比瞬间展开和收缩的方式更为美观。
下面就通过一段代码示例介绍一下如何利用jquery实现此功能，当然jquery就是js。
代码实例:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.gaodaima.com/" /> <title>搞代码</title> <style type="text/css"> body{text-align:center} .box{ width:200px; height:100px; background-color:green; margin:0px auto; } </style> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $(".box").slideUp(); }); $("#show").click(function(){ $(".box").slideDown(); }); }) </script> </head> <body> <div class="box"></div> <input type="button" id="hide" value="点击隐藏"/> <input type="button" id="show" value="点击展开"/> </body> </html> |
原创文章，转载请注明： 转载自搞代码
本文链接地址: jQuery用div以滑动方式展开和收起代码实例
微信 赏一包辣条吧~
支付宝 赏一听可乐吧~
发表评论