心花怒放啊......
可是 MM 走光了......
<script type="text/javascript"> $(document).ready(function(){ $(".button_s").click(function(){ $("#panel").slideToggle("fast"); $(this).toggleClass("button_s_active"); $(".slidex").toggleClass("slidex_active"); $(".arrow").toggleClass("arrow_active"); return false; }); }); </script>HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>jQuery : Write less , Do more . </title> <link href="demo.css" rel="stylesheet" type="text/css" /> <!-- 先引入样式表,具体位置看你自己了 --> <script type="text/javascript" src="jquery.js"></script> <!-- 上面先引入jQuery,具体版本和位置看你自己了 --> <script type="text/javascript"> $(document).ready(function(){ $(".button_s").click(function(){ $("#panel").slideToggle("fast"); $(this).toggleClass("button_s_active"); $(".slidex").toggleClass("slidex_active"); $(".arrow").toggleClass("arrow_active"); return false; }); }); </script> </head> <body> <div class="boxer"> <div id="panel" title="你心花怒放了不?"> <p>心花怒放啊......<br />可是 MM 走光了......</p> </div> <p class="slidex"><a href="#" class="button_s" title="看见漂亮MM了吗?"></a></p> <p class="arrow"></p> </div> </body> </html>CSS样式表:
body { margin: 0 auto; padding: 0; font: 75%/120% '微软雅黑',Arial, Helvetica, sans-serif; } .boxer { width: 800px; margin:0 auto; } a:focus { outline: none; } #panel { background: url(images/back.png) repeat; height: 200px; border:solid 4px #f68e1c; text-shadow:2px 2px 1px rgba(0,0,0,0.4); border-bottom:0px; color:yellow; display: none; } #panel p { width:80%; font-size:36px; height:150px; line-height:50px; padding:30px 0 0 0; margin:10px auto; background: url(images/h1_128.png) no-repeat right center; } .slidex { margin: 0; padding: 0; height:40px; overflow:hidden; border-top: solid 4px #f68e1c; background: url(images/btn-slide.gif) no-repeat center top; } .slidex_active { background-position: center -40px; } .button_s { background: url(images/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } .button_s_active { background-position: right 12px; } .arrow { padding:0 0 0 0px; height:50px; width:300px; margin:0px auto; background: url(images/arrow.png) no-repeat center top; } .arrow_active { background-position: center -50px; }