js右下角提示信息
来源：luqidong
发布时间：2014-02-10 19:45:59
点击数：
整理，留备用，高手请绕道。
在实现过程中，遇到一个问题，通常在Js中获取对象的高度时，会使用obj.style.height.对没错，这句代码的直观上是能够获取到。
但有个前提。当对象的初始高度不是通过行内样式设定时。该表达式的返回是非数字。在练习中通过obj.offsetHeight来获取的。
PS:示例兼容主流浏览器。
实现代码：
<!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=gb2312" />
<title>测试右下角弹出框</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
#tips{ position:absolute; right:5px; bottom:3px; width:200px; border:solid 0px red; height:0px; overflow:hidden;}
#tips .first{
height:30px;
line-height:30px;
text-align:left;
width:200px;
overflow:hidden;
font-size:13px;
font-weight:bold;
background:#0066FF;
color:white;
text-indent:10px;
}
#tips .second{
height:120px;
width:200px;
font-size:13px;
color:#000000;
line-height:20px;
text-indent:23px;
word-wrap:break-word;
background:#ccc;
}
#link{ line-height:30px;}
#link a{ font-size:13px; font-weight:bold; color:#000000;}
</style>
<script language="javascript" type="text/javascript">
var tmr = null;
//弹出层的高度
var maxHeight=150;
//弹出时的步伐设定
var step = 8;
//弹出层的对象
var obj = null;
//执行频率
var speed = 20;
//弹出和缩回是参考的一个变量。
var b = true;
var startIt = function()
{
obj = document.getElementById('tips');
tmr = window.setInterval("showTips()",speed);
}
var showTips = function()
{
var _height=parseInt(obj.offsetHeight);
if(_height<maxHeight&&b==true)
{
obj.style.height=_height+step+'px';
obj.style.borderWidth=1+'px';
}
else
{
if(b==true)
{
window.clearInterval(tmr);
window.setTimeout(function(){
//弹出的窗口在等待3秒钟后，自动缩回。
tmr = window.setInterval("showTips()",speed);
},3000);
b=false;
return;
}
if(_height-step<=0)
{
obj.style.height='0px';
window.clearInterval(tmr);
b=true;
return;
}
obj.style.height=_height-step+'px';
obj.style.borderWidth=0+'px';
}
}
</script>
</head>
<body>
<div id="link">
<a href="javascript:startIt();">您有新的消息,点击查看</a>
</div>
<div id="tips">
<p class="first">你有新的消息</p>
<p class="second">www.78oa.com已经有新的版本，请问是否要更新。</p>
</div>
</body>
</html>
本文由www.78oa.com原创转载请著名出处