纯js实现页面右下角提示信息渐出和渐失

来源：互联网发布：停车软件的盈利模式编辑：程序博客网时间：2024/05/23 11:30

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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 runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
    /*
     * 2010.8.4
     * 此js弊端：渐出和渐失div时怎么隐藏掉滚动条
     */

        var width=0;
        var height=0;
        var isShow=0;
        var isResize=0;

        //此方法在窗体加载时设定div的位置并调用TimeOutDiv以实现渐出效果
        function showDiv()
        {
            isShow++;
            //里面div位置
            var divWidth=divMessage.style.width;    //得到当前div宽
            var divHeight=divMessage.style.height; //得到当前div高

            //得到浏览器宽和高
            width=Ext.getBody().getViewSize().width;
            height=Ext.getBody().getViewSize().height;


            divMessage.style.marginLeft=width-divWidth.substring(0,divWidth.length-2)-10;
            if(isResize!=0)
            {
                divMessage.style.marginTop=height-divHeight.substring(0,divHeight.length-2)-30;
                isResize=0;
            }
            else
            {
                divMessage.style.marginTop=height;
                TimeOutDiv();
            }
        }

        function TimeOutDiv()
        {
            if(isShow!=0)
            {
                var mt=divMessage.style.marginTop;
                mt=mt.substring(0,mt.length-2);

                var divHeight=divMessage.style.height;//当前div的高
                divHeight=divHeight.substring(0,divHeight.length-2);

                if(mt==((parseInt(height)-parseInt(divHeight)-30)))     //此处加载时距顶端减去的数值(如30)必须是5的倍数，因为div消失时以5来递减的
                {
                    isShow=0;
                    clearTimeout(timeOutShow);
                 }
                else
                {
                    mt=mt-10;
                    divMessage.style.marginTop=mt;

//                    if(parseInt(divHeight)<200)     //div的高必须为5的倍数
//                    {
//                        divHeight=parseInt(divHeight)+5;
//                        divMessage.style.height=divHeight;
//                    }
                }
                var timeOutShow=setTimeout("TimeOutDiv()",50);
            }
        }


        /* div逐渐消失(类似缩进页面下部的效果)
         * 实现思路：让div逐渐增加与浏览器顶端的距离，这样的话页面会越来越高(伴随着出现滚动条)，
         * 所以再增加与顶端距离的同时要让div的高减小(减小的数值等于增加的顶端距离)，
         * 但是不知道为什么在div的高大概剩余40的时候会出现滚动条，仔细跟了下发现此时减去的div的高
         * 不能完全跟上增加的顶端距离(注：div的高大概大于40之前没有这种现象)，所以不得不在这个时候让
         * div的高减去的数值增加(数值增加的代码注释掉了，因为这种方法只能针对固定的窗体的大小，
         * 一旦客户端改变了窗体大小代码就没用了(还是出现滚动条))
         */
        var x=5;
        var y=0;
        function hideDiv()
        {//alert("aaaaaa");
//            if(x==15)
//                y=-5

            var divHeight=divMessage.style.height;//当前div的高
            divHeight=divHeight.substring(0,divHeight.length-2);

            var height=Ext.getBody().getViewSize().height; //浏览器的高


            var mt=divMessage.style.marginTop;       //初始时div距浏览器顶部的距离
            mt=mt.substring(0,mt.length-2);
            //alert(height+","+marginTop+","+divHeight);
            if(parseInt(divHeight)<=0)
            {                                               //div的高为零，此时消除timeout，隐藏div
                clearTimeout(timeOutHide);
                divMessage.style.display="none";
            }
            else                                            //距顶部距离小于浏览器高时，说明div还没有完全隐藏，此时增加距顶部距离的同时
            {                                               //减小div的高
                mt=parseInt(mt)+5;     //增加距顶部距离
                divMessage.style.marginTop=mt;

                var z=(parseInt(mt)-(parseInt(height)-parseInt(divHeight)));     //当距顶部距离大于浏览器高和div高的差时才减小div的高
                //alert(marginTop+","+divHeight+","+height+","+(parseInt(height)-parseInt(divHeight)).toString()+","+x.toString());
                //alert(z);
                if(z==0)//||(x==15&&z%y==0)
                {
//                    if(parseInt(divHeight)<40)
//                        x=15;
//                    if(divHeight<x)
//                        divHeight=0;
//                    else
                        divHeight=parseInt(divHeight)-x;
                    divMessage.style.height=divHeight;
                }

            }
            var timeOutHide=setTimeout("hideDiv()",150);
        }

        //window的resize事件以实现不论页面怎么变动div始终位于页面右下角
        window.onresize=function WindowResize()
        {
            isResize++;

             /* 加上判断的原因是让只有窗体大小改变时才激发此事件，
              * 因为改变div的marginTop时默认会激发onresize事件，这样的话展示和关闭效果都出不来
              */
            if(Ext.getBody().getViewSize().width!=width||Ext.getBody().getViewSize().height!=height)
                showDiv();
        }
    </script>
    <style type="text/css">
        .e
        {
             margin-left:10px;
        }
    </style>
</head>
<body onload="showDiv()">
    <form id="form1" runat="server">
    <ext:ScriptManager ID="sm" runat="server"></ext:ScriptManager>
    <div>
    <ext:Window ID="aa" runat="server" Cls="e"></ext:Window>
            <div id="divMessage" runat="server" style="width:208px; height:200px;">
                <table cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="background-color: #F7F7F7;width:2px;"></td>
                        <td style="background-color: #EEEEEE;width:2px;"></td>
                        <td style="background-color: #E6E6E6;width:2px;"></td>
                        <td style="background-color: #DDDDDD;width:2px;"></td>
                        <td style="background-color: #D4D4D4;width:2px;"></td>
                        <td style="background-color: #CCCCCC;width:2px;"></td>
                        <td style="background-color: #C3C3C3;width:2px;"></td>
                        <td style="background-color: #BBBBBB;width:2px;"></td>
                        <td width="200px">
                            <div style="background-color: #CFE0F1;border:solid 1px #99BBE8;margin-left:0;">
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td align="right" style="height:20px;width:100%; " colspan="3">
                                            <label onclick="hideDiv()">最小</label>   
                                            <img src="images/close.jpg" onclick="hideDiv()" style=" cursor:pointer;margin-right:5px;" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width:5px;height:175;"></td>
                                        <td style="background-color:#DFE8F6;height:175;width:190px;border:1px solid #99BBE8;">
                                            <a onclick="divMessage.style.display='none';" style="cursor:pointer;">跳转</a>
                                        </td>
                                        <td style="width:5px;height:175px;"></td>
                                    </tr>
                                    <tr>
                                        <td colspan="3" style="height:5px;width:100%;"></td>
                                    </tr>
                                </table>

                            </div>
                        </td>
                    </tr>
                </table>
            </div>
    </div>
    </form>
</body>
</html>

希望看到文章的朋友给俺提出的问题：渐出和渐失的时候怎么不出现滚动条，给个答案，谢谢！俺的Email：niuhengaiyangrui@126.com，QQ：516957105,谢谢！