做js飘窗遇到的问题

2019独角兽企业重金招聘Python工程师标准>>>

今天网站推广，要做一个飘窗，就是遇到浏览器边缘就反弹的带链接图片，首页就找了网上一个现成的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.οnmοuseοver=function(){clearInterval(itl);}
  obj.οnmοuseοut=function(){itl=setInterval('floatAD()', delay);}
  function hide1()  
  {   
  obj.style.visibility="hidden"; 
  }
  </script>

以上代码，直接在本地运行，效果良好，可是更新到测试环境后就出现问题了，图片一闪而过，跳了一次后就不见了，开始以为设置时间太短，就将delay设置为400，结果也是一样的，也不是浏览器的问题，也不是电脑的问题，那么肯定是代码有问题了，最初怀疑setInterval支持不太好，就换成setTimeOut，结果也是一样的现象，一闪而过。折腾了3个多小时，担心是变量名字冲突，换了所有名字，也是不行，真实郁闷了。

好了，说下解决思路，我解决该问题用的是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 ==> 可见区域高度

转载于:https://my.oschina.net/u/991158/blog/133251