其实很简单:css定位层一直在右下角,用js控制层的高度增减。
代码:
View Code
1 <!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>
2 <title>测试</title>
3 <style type="text/css">
4 .divCss{bottom:0;display:block;height:25px;overflow:hidden;padding:0;position:fixed;right:20px;}
5 .contentCss{background:#666;height:200px;width:200px;}
6 .contentCssHeight{ }
7 .titleCss{width:200px;height:25px;line-height:25px;text-align:right;margin:0px;background:#999999;}
8 #close{cursor:pointer;}
9 </style>
10 <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
11 <script language="javascript" type="text/javascript">
12 $(function(){
13 //标题层的高度--提示打开或关闭
14 var titHeight=$("#ditTitle").height();
15 //内容层的高度
16 var conHeight=$("#divContent").height();
17 //打开或关闭
18 $("#close").toggle(function(){
19 //改变提示
20 $("#close").text("关闭");
21 //动画--一秒内消息层高度增加,top增加
22 $("#msgDiv").animate({height:titHeight+conHeight},1000,function(){
23 //展开后执行的函数
24 });
25 },function(){
26 //改变提示
27 $("#close").text("打开");
28 //alert(temp+" "+titHeight);
29 $("#msgDiv").animate({height:titHeight},1000,function(){
30 //关闭后执行的函数
31 });
32 })
33 //执行
34 var myTimer,i=8;
35 function starFun()
36 {
37 //触发click事件,显示
38 if(i==4){
39 $("#close").click();
40 }
41 //清除timeout,触发click事件,关闭层
42 if(i==0){
43 window.clearTimeout(myTimer);
44 if($("#close").text()!="打开")
45 $("#close").click();
46 }
47 myTimer=window.setTimeout(starFun,1000); i=i-1;
48 }
49 starFun() });
50 </script>
51 </head>
52 <body>
53 <div style="height: 1000px; background: #ccc;">测试Div</div>
54 <div id="msgDiv" class="divCss">
55 <div id="ditTitle" class="contentCssHeight titleCss"><span id="close">打开</span></div>
56 <div id="divContent" class="contentCss">这是一些测试内容</div>
57 </div>
58 <div style="height: 1000px; background: #C0C0C0;">测试Div</div></body></html>