<!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>
<title>测试</title>
<style type="text/css">
.divCss{
padding:0px;
height:25px;
overflow:hidden;
position:absolute;
}
.contentCss{
background:#cccccc;
width:200px;
height:200px;
}
.contentCssHeight{
}
.titleCss{
width:200px;
height:25px;
line-height:25px;
text-align:right;
margin:0px;
background:#999999;
}
#close{
cursor:pointer;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
代码 <script language="javascript" type="text/javascript">
$(function(){
//获取当前浏览器的宽度
var winWidth=$(window).width();
//获取当前浏览器的高度
var winHeight=$(window).height();
//标题层的高度--提示打开或关闭
var titHeight=$("#ditTitle").height();
//内容层的高度
var conHeight=$("#divContent").height();
//临时变量,存储内容层的高度
var temp = conHeight;
//alert(conHeight);
//加载时设置层的位置
$("#msgDiv").css({top:$(window).height()-$("#ditTitle").height(),left:$(window).width()-$("#ditTitle").width()-16});
//窗体改变大小时,重新设置
$(window).resize(function(){
//重新获取窗口的宽高
winWidth=$(window).width();
winHeight=$(window).height();
$("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight,left:winWidth-$("#ditTitle").width()-16});
});
$(window).scroll(function(){
//重新获取窗口的宽高
winWidth=$(window).width();
winHeight=$(window).height();
$("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight+$(window).scrollTop()});
});
//打开过关闭
function openTips(){
//改变提示
$("#close").text("关闭");
//还原内容层的高度
//alert(titHeight+conHeight);
//return;
$("#divContent").height(temp);
conHeight=temp;
//动画--一秒内消息层高度增加,top增加
//$("#msgDiv").height($(this).height()+temp);
$("#msgDiv").animate({top:winHeight-titHeight-conHeight+$(window).scrollTop(),height:titHeight+conHeight},1000,function(){
//展开后执行的函数
});
}
function closeTips(){
//改变提示
$("#close").text("打开");
//alert(temp+" "+titHeight);
$("#msgDiv").animate({top:winHeight-titHeight+$(window).scrollTop(),height:titHeight},1000,function(){
//关闭后执行的函数
conHeight=0;
//设置内容层的高度为0
$("#divContent").height(0);
});
}
openTips();
setTimeout(closeTips,3000);
//执行
/*var myTimer,i=8;
function starFun()
{
//触发click事件,显示
if(i==4)
{
$("#close").click();
}
//清除timeout,触发click事件,关闭层
if(i==0)
{
window.clearTimeout(myTimer);
if($("#close").text()!="打开")
$("#close").click();
}
myTimer=window.setTimeout(starFun,1000);
i=i-1;
}
starFun()
*/
});
</script>
</head>
<body>
<div id="msgDiv" class="divCss">
<div id="ditTitle" class="contentCssHeight titleCss">
<span id="close">打开</span></div>
<div id="divContent" class="contentCss">
这是一些测试内容</div>
</div>
</body>
</html>
