菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html><html><head><meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="/public/themes/tool/style.css?version=1.02"> <script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> </head> <body> <style> #panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;} #panel{padding:50px;display:none;} </style> <button id="stop">停止滑动</button> <div id="flip">点我向下滑动面板</div> <div id="panel">Hello world!</div> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); $("#panel").slideUp(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> </body> </html>
运行结果