js右下角提示信息

来源:luqidong 发布时间:2014-02-10 19:45:59 点击数:
 
整理,留备用,高手请绕道。
在实现过程中,遇到一个问题,通常在Js中获取对象的高度时,会使用obj.style.height.对没错,这句代码的直观上是能够获取到。
但有个前提。当对象的初始高度不是通过行内样式设定时。该表达式的返回是非数字。在练习中通过obj.offsetHeight来获取的。
PS:示例兼容主流浏览器。
78OA办公系统
实现代码:
<!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原创转载请著名出处