div以滑动方式展开和收起代码
分类:实例代码
div以滑动方式展开和收起代码属于前端实例代码,有关更多实例代码大家可以查看。
以滑动方式展现和收缩一个div比瞬间展开和收缩的方式更为美观。
下面就通过一段代码示例介绍一下如何利用jquery实现此功能,当然jquery就是js。
代码实例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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="mytest/jQuery/jquery-1.8.3.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>
点击相应按钮可以展开或者隐藏div元素,代码比较简单这里就不多介绍了。
相关阅读:
(1).click事件参阅jQuery click事件一章节。
(2).slideUp()参阅jQuery slideUp()方法一章节。
(3).slideDown()参阅jQuery slideDown()方法一章节。
div以滑动方式展开和收起代码,这样的场景在实际项目中还是用的比较多的,关于div以滑动方式展开和收起代码就介绍到这了。