作js飄窗遇到的問題

今天網站推廣,要作一個飄窗,就是遇到瀏覽器邊緣就反彈的帶連接圖片,首頁就找了網上一個現成的js效果,實現以下:
  <div id="ad" style="position:absolute;z-index:1">
        <img src="../關閉框" onClick="javascript:window.hide1();" width="164" height="14" border="0" vspace="3" alt="關閉廣告"/><br/>
  <a href="../推廣連接" target="_blank"><img src="../推廣圖片" border="0"></a>
  </div>
  <script type="text/javascript">
  var x = 50,y = 60;
  var xin = true, yin = true;
  var step = 1;
  var delay = 40;
  var obj=document.getElementById("ad");
  
  function floatAD() {
   var L=T=0
   var R= document.body.clientWidth-obj.offsetWidth;
   var B = document.body.clientHeight-obj.offsetHeight;
   obj.style.left = x + document.body.scrollLeft;
   obj.style.top = y + document.body.scrollTop;
   x = x + step*(xin?1:-1);
   if (x < L) { xin = true; x = L;}
   if (x > R){ xin = false; x = R;}
   y = y + step*(yin?1:-1);
   if (y < T) { yin = true; y = T; }
   if (y > B) { yin = false; y = B; }
  }
  
  var itl= setInterval('floatAD()', delay);
  obj.onmouseover=function(){clearInterval(itl);}
  obj.onmouseout=function(){itl=setInterval('floatAD()', delay);}
  function hide1()  
  {   
  obj.style.visibility="hidden"; 
  }
  </script>

以上代碼,直接在本地運行,效果良好,但是更新到測試環境後就出現問題了,圖片一閃而過,跳了一次後就不見了,開始覺得設置時間過短,就將delay設置爲400,結果也是同樣的,也不是瀏覽器的問題,也不是電腦的問題,那麼確定是代碼有問題了,最初懷疑setInterval支持不太好,就換成setTimeOut,結果也是同樣的現象,一閃而過。折騰了3個多小時,擔憂是變量名字衝突,換了全部名字,也是不行,真實鬱悶了。 javascript

好了,說下解決思路,我解決該問題用的是alert(最好用js調試工具,如FireBug等),把可疑的變量都輸出了一遍,發現document.body.clientHeight的值爲0,致使obj.style.top爲負值。可算找到緣由了,接下來就是解決辦法了,經過在網上查詢,解決辦法以下: 將document.body.clientHeight改成document.documentElement.clientHeight ,修改後運行正常。 那麼上面二者有何區別呢?(如下資料摘抄自網上,詳細http://www.cnblogs.com/luluping/archive/2010/07/16/1778766.html) document.body.clientWidth ==> BODY對象寬度 document.body.clientHeight ==> BODY對象高度 document.documentElement.clientWidth ==> 可見區域寬度 document.documentElement.clientHeight ==> 可見區域高度
相關文章
相關標籤/搜索