以滑动方式展现和收缩一个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> |
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery用div以滑动方式展开和收起代码实例
转载请注明原文链接：jQuery用div以滑动方式展开和收起代码实例
