倡萌(www.cmhello.com)最近想实现一个功能:隐藏播放器,点击才展开,好不容易找到了 webdesignerwall.com 这个网站,看到里面正好有我需要的功能代码,整理过来收藏备用。
jQuery 实现展开与收缩功能代码:
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!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>Simple Slide Panel</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js?ver=1.4.4"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle("slow"); $(this).toggleClass("active"); return false; }); }); </script> <style type="text/css"> .bofang { margin: 0 auto; padding: 0; width: 500px; font: 75%/120% Arial, Helvetica, sans-serif; } a:focus { outline: none; } #panel { background: #754c24; height: 480px; display: none; } .slide { margin: 0; padding: 0; border-top: solid 4px #422410; background: url(http://file.cmhello.com/2010/11/btn-slide.gif) no-repeat center top; } .btn-slide { background: url(http://file.cmhello.com/2010/11/white-arrow.gif) no-repeat right -50px; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; } </style> </head> <body> <div class="bofang"> <div id="panel"> <embed src="http://www.tudou.com/l/COhXyHX3lJI" type="application/x-shockwave- flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="500" height="480"></embed> </div> <p class="slide"><a href="#" class="btn-slide">打开播放器</a></p> </div> </body> </html> |
需要用到的两个图片,请务必保存到你自己的空间,以防失效:
最终演示: