移动层随滚动条移动的问题求解

本帖最后由 up2ulin 于 2009-07-06 10:22:45 编辑

解决方案 »

  1.   

    问题主要是这样：
    js代码第一行：
    window.onload = closeDiv; //window.onload可以有两种情况，一种是执行getMsg【留言板大窗口】，另一种是closeDiv【留言板小窗口】【这两种窗口样式通过单击按钮切换】，如果window.onload设置为大窗模式口那么窗口会随滚动条移动，如果是小窗口则无反应。想知道问题出在哪里。
        window.onresize = resizeDiv;
        window.onscroll = resizeDiv; //我认为这里是控制层是否跟随滚动条移动的函数,当window.onload为getMsg一切正常，当为closeDiv是窗口就不随滚动条移动了，查看代码发现两个getMsg会执行一个resizeDiv函数，于是我设置window.onscroll = resizeDiv; 但当window.onload为closeDiv小窗口仍不随滚动条移动。
      

  2.   

    try:
    window.onload = closeDiv;
    ===>
    window.onload = function(){getMsg();closeDiv();};
      

  3.   

    <!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>
    /* 留言窗口 */
    #eMeng{ width:209px; overflow:hidden; VISIBILITY:hidden; position:absolute; bottom:0px; right:0px; z-index:999; }
        .gb_win_open{ height:280px; }
        .gb_win_close{ height:28px; }
    #eMeng_gb{ z-index:100; position:absolute; top:0px; left:0px; }
    #eMeng_gb table{ width:100%; border:none; }
    #eMeng_bar{ height:28px; position:absolute; left:0; z-index:90; }
        .eMeng_bar_t1{ top:255px; }
        .eMeng_bar_t2{ top:0; }
    .gb_top{ width:209px; height:44px; background:#ccc url(images/guestbook/top_bg.gif) top left no-repeat; }
        .gb_top_box{ height:22px; line-height:22px;  margin:0px 8px 0 8px; color:#FFFFFF; font-size:10pt; position:relative; top:-7px; }
        .gb_btn_1{ position:absolute; top:0px; left:165px; }
        .gb_btn_1 img{ cursor:pointer; }.gb_mid{ background:url(images/guestbook/mid_bg.gif) top left repeat-y; padding:5px 8px; }
    .gb_bot{ height:10px; background:url(images/guestbook/bottom_bg.gif) bottom left no-repeat; }
    .gb_Frm{ border:solid 1px #77869A; }
        .Frm_area{ width:186px; height:90px; margin-left:2px; }
        .Frm_input{ width:165px; }
        .Frm_btn{ background:url(images/guestbook/btn_sub.gif) top left no-repeat; width:66px; height:19px; border:none; }
        .gb_yanzheng_box{ padding-left:8px; }
        .gb_yanzheng_box img{ vertical-align:top !important; vertical-align:text-bottom; }
    .gb_icon_bg1{ background:url(images/guestbook/icon.gif) 0 -2px no-repeat; padding-left:20px; height:22px; }
    .gb_icon_bg2{ background:url(images/guestbook/icon.gif) 0 -27px no-repeat; padding-left:20px; height:22px; }
    .gb_icon_bg3{ background:url(images/guestbook/icon.gif) 0 -52px no-repeat; padding-left:20px; height:22px; }
    </style>
    <script>    window.onload = function(){init();closeDiv();}; //window.onload可以有两种情况，一种是执行getMsg【留言板大窗口】，另一种是closeDiv【留言板小窗口】【这两种窗口样式通过单击按钮切换】，如果window.onload设置为大窗模式口那么窗口会随滚动条移动，如果是小窗口则无反应。想知道问题出在哪里。
        window.onresize = resizeDiv;
        window.onscroll = resizeDiv; //我认为这里是控制层是否跟随滚动条移动的函数,当window.onload为getMsg一切正常，当为closeDiv是窗口就不随滚动条移动了，查看代码发现两个getMsg会执行一个resizeDiv函数，于是我设置window.onscroll = resizeDiv; 但当window.onload为closeDiv小窗口仍不随滚动条移动。
        //短信提示使用(asilas添加)
        var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,bodyfrm,i=0;
            
        function init(){
         try{
            bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
            //alert(bodyfrm);
            //bodyfrm = document.documentElement || document.body;
            divTop = parseInt(document.getElementById("eMeng").style.top,10);
            divLeft = parseInt(document.getElementById("eMeng").style.left,10);
            divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10);
            divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10);
            docWidth = bodyfrm.clientWidth;
            docHeight = bodyfrm.clientHeight;
            document.getElementById("eMeng").style.top = parseInt(bodyfrm.scrollTop,10) + docHeight + 10;    //  divHeight
            document.getElementById("eMeng").style.left = parseInt(bodyfrm.scrollLeft,10) + docWidth - divWidth;
            document.getElementById("eMeng").style.visibility="visible";
            objTimer = window.setInterval("moveDiv()",10);
            }
            catch(e){}
        }
        function getMsg()
        {
            try{
            bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
            //alert(bodyfrm);
            //bodyfrm = document.documentElement || document.body;
            divTop = parseInt(document.getElementById("eMeng").style.top,10);
            divLeft = parseInt(document.getElementById("eMeng").style.left,10);
            divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10);
            divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10);
            docWidth = bodyfrm.clientWidth;
            docHeight = bodyfrm.clientHeight;
            document.getElementById("eMeng").style.top = parseInt(bodyfrm.scrollTop,10) + docHeight + 10;    //  divHeight
            document.getElementById("eMeng").style.left = parseInt(bodyfrm.scrollLeft,10) + docWidth - divWidth;
            document.getElementById("eMeng").className = "gb_win_open";
            document.getElementById('eMeng_bar').className = "gb_top eMeng_bar_t1";
            document.getElementById("eMeng").style.visibility="visible";
            document.getElementById("eMeng_gb").style.visibility="visible";
            document.getElementById("eMeng_bar").style.visibility="hidden";
            objTimer = window.setInterval("moveDiv()",10);
            }
            catch(e){}
        } 
        
        function resizeDiv()
        {
            try{    //修正窗口位置?
            divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
            divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
            docWidth = bodyfrm.clientWidth;
            docHeight = bodyfrm.clientHeight;
            document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(bodyfrm.scrollTop,10)
            document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(bodyfrm.scrollLeft,10)
                    }
            catch(e){}
        } 
        
        function moveDiv()
        {
            try {
            if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(bodyfrm.scrollTop,10)))
            {
            window.clearInterval(objTimer)
            objTimer = window.setInterval("resizeDiv()",10)
            }
            divTop = parseInt(document.getElementById("eMeng").style.top,10)
            document.getElementById("eMeng").style.top = divTop - 2
            }
            catch(e){}
        }
            
        
        function closeDiv()
        {
            try {
                document.getElementById('eMeng_gb').style.visibility='hidden';
                document.getElementById('eMeng').className = "gb_win_close";
                document.getElementById('eMeng_bar').className = "gb_top eMeng_bar_t2";
                document.getElementById('eMeng_bar').style.visibility='visible';
                if(objTimer){
                    window.clearInterval(objTimer);
                }
                window.setInterval("resizeDiv()",10);
            }
            catch(e){}
            //if(objTimer) window.clearInterval(objTimer) //当不需要小控制柄时，将控制柄删除将此处打开。
            //resizeDiv();    }
    </script>
    </head><body><!-- 留言板 -->
    <div id="eMeng" class="gb_win_open">
    <div id="eMeng_gb">
    <form name="myform" method="post" action="guestbook/post.php" onsubmit="javascript:return Check_Frm(this);">
    <table cellpadding="0" cellspacing="0">
      <tr>
    <td class="gb_top"><div class="gb_top_box">请输入留言内容<div class="gb_btn_1"><img src="images/guestbook/btn_close.gif" onclick="javascript:closeDiv();" alt="关闭窗口" /></div></div></td>
      </tr>
      <tr>
    <td class="gb_mid"><textarea id="Frm_area" name="guestbook[content]" class="gb_Frm Frm_area" cols="" rows="" ></textarea></td>
      </tr>
      <tr>
    <td class="gb_mid">
    <div class="gb_icon_bg1"><input type="text" id="Frm_tel" name="guestbook[title]" class="gb_Frm Frm_input"  /></div>
    <div class="gb_icon_bg2"><input type="text" id="Frm_email" name="guestbook[email]" class="gb_Frm Frm_input" /></div>
    <div class="gb_icon_bg3"><input type="text" id="Frm_address" name="guestbook[qq]" class="gb_Frm Frm_input" /></div>
    </td>
      </tr>
      <tr>
    <td class="gb_mid"><img src="images/guestbook/line_1.gif" alt="" /></td>
      </tr>
      <tr>
    <td class="gb_mid"><div class="gb_yanzheng_box"><img src="checkcode.php" id="checkcode" onclick="this.src='checkcode.php?id='+Math.random()*5;" style="cursor:pointer;" alt="验证码,看不清楚?请点击刷新验证码"/>&nbsp;<input name="checkcodestr" type="text" id="Frm_yanzheng" size="4" class="gb_Frm" style="width:50px;" />&nbsp;<input type="submit" value="" class="Frm_btn" /></div></td>
      </tr>
      <tr>
    <td class="gb_bot"><input name="dosubmit" value="dosubmit" type="hidden"/><input name="guestbook[username]" value="admin2" type="hidden"/></td>
    </tr>
    </table>
        </form>
    </div>
    <div id="eMeng_bar" class="gb_top eMeng_bar_t1">
    <div class="gb_top_box" style="top:5px;">留言板<div class="gb_btn_1"><img src="images/guestbook/btn_open.gif" onclick='javascript:getMsg()' alt="弹出窗口" /></div></div>
    </div>
    </div>
    <!-- 留言板 --><p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    <p>a</p>
    </body>
    </html>
      

  4.   

    如果这样写的话可以把
    bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
            //alert(bodyfrm);
            //bodyfrm = document.documentElement || document.body;
            divTop = parseInt(document.getElementById("eMeng").style.top,10);
            divLeft = parseInt(document.getElementById("eMeng").style.left,10);
            divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10);
            divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10);
            docWidth = bodyfrm.clientWidth;
            docHeight = bodyfrm.clientHeight;这些都提导函数外面来定义吧？我尝试定义为什么函数内部无法调用函数内部调用全局变量直接饮用酒可以了吧？
      

  5.   

    这些变量的值是动态变化着的，所以每次使用的时候都需要重新去取，定义全局变量意义不大其实也没有什么思路可言
    发现问题：当页面初始化的时候，DIV不随滚动条移动
    点击图片后移动效果正常
    发现onclick时间执行了getMsg()方法
    所以确定问题在于，缺少了getMsg某个或某些定义或者初始化，所以在onload时直接执行getMsg方法
      

  6.   

    恩，我就是找不到那个方法，我一直想如果能找到这个clearDiv中缺少的方法就可以把它提出来放到clearDiv中，这样就不必执行一遍getMsg，因为这样会有一个窗口弹出的动作。
    找了半天发现两个函数执行时候clearDiv少了resizeDiv（）动作。可是在clearDiv中即便执行它也没有效果，窗口还是不跟随滚动条移动。