倡萌(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> |
需要用到的两个图片，请务必保存到你自己的空间，以防失效：
最终演示：