jQuery 实现展开与收缩功能代码

倡萌(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>

需要用到的两个图片,请务必保存到你自己的空间,以防失效:

最终演示:

支付宝打赏支付宝打赏 微信打赏微信打赏

如果文章对你有帮助,欢迎点击上方按钮打赏作者

最后编辑于:2010/11/28作者: 胡倡萌

一个疯狂的 WordPress 爱好者,喜欢折腾 WordPress 主题,分享 WordPress 资源。如果你也喜欢 WordPress,欢迎和我一起交流!

4 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. iKx.me说道:
    4#

    这玩意不错

  2. 化妆品展示架说道:
    3#

    这个功能就几行JQUERY语句就搞定了的~不难吧

  3. 爱佳软说道:
    2#

    很绚丽的效果,记得昨天在一个国外网站上看到了 动态开幕 效果,也是用iQuery实现的。演示地址:http://buildinternet.com/live/curtains/

  4. lai说道:
    1#

    :smile: :x

扫一扫,用手机访问本站

扫一扫,用手机访问本站