漂浮广告--Document Type

    现在的漂浮广告越来越少,在一些大型门户网站上基本看不到它们的影子了(估计相当多的网页浏览者不怎么喜欢它们吧)，但在一些小型的网站上还是能够看到，不管是这些小型网站还没有向W3C转型还是其它原因，总之这个不是我要表达的重点。好了，废话少说.....
    我写了一个漂浮广告的例子，虽然成功了，但还是下了不少功夫，即使代码看起来很简单:
<!-- <!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"> -->
<html>
<head>
    <title>漂浮广告</title>
    <style type="text/css">
    *{margin:0px; padding:0px;}
#divFloat{
position:absolute;width:150px;height:150px;border:1px solid black;
font-size:70px;
}
    </style>
</head>
<body>
<div id="divFloat">
我是广告
<script language="javascript" type="text/javascript">
var x = 0, y = 0;  //DIV坐标
var xStep = 10, yStep = 10;  //坐标每次移动的距离
//标记DIV在X、Y轴的移动方向(true,true表示向浏览器的右下角移动)
var xDirection = true, yDirection = true;   
//根据Id获取控件
function $(id) {return document.getElementById(id) };

function changePosition() {
var divPosition = $("divFloat");
x = x + xStep * (xDirection ? 1 : -1); 
y = y + yStep * (yDirection ? 1 : -1);

//若超出浏览器的宽度反向移动
if (x <= 0) xDirection = true;
if (x >= document.body.clientWidth - divPosition.offsetWidth) xDirection = false; if (y <= 0) yDirection = true;
if (y >= document.body.clientHeight - divPosition.offsetHeight) yDirection = false;

//Div重新定位
divPosition.style.top = y;
divPosition.style.left = x;
}
setInterval("changePosition()",200);
</script>
</div>
</body>
</html><!-- 注意:此示例没有加Document Type声明,若加入声明,会产生若干无法预期的效果 -->     最重要的问题莫过于Document Type的声明了,我先试着写(有Document Type声明)，但很让我失望，连offsetHeight属性都没有用，而且divFloat的样式都不能应用(补充说明:我用的是IE8，用火狐的行)!我绞尽脑汁还是不行，代码看了很长时间都没有发现问题，最后实在没有办法了终于想到了Document，把document一删掉，一切OK。
    在这里我想知道为什么加入Document Type后与预期的差距那么远，以至于我连自己都怀疑自己写的代码，毕竟以后的HTML都要朝W3C的标准靠拢的，有没有一种加入Document Type后还能产生一样效果的方法或还有没有更好的方法。    请各位各抒己见，知无不言，言无不尽，谢谢！

解决方案 »

  1.   

    有，那就是自己多去学习W3C各种标准。弄明白每种Document Type都允许和不允许哪些。
      

  2.   

    <!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">
    <html>
    <head>
      <title>漂浮广告</title>
      <style type="text/css">
        *
        {
          margin: 0px;
          padding: 0px;
        }
        #divFloat
        {
          position: absolute;
          width: 150px;
          height: 150px;
          border: 1px solid black;
          font-size: 70px;
        }
      </style>
    </head>
    <body>  <div id="divFloat">
        我是广告
      </div>
      <script language="javascript" type="text/javascript">
        var x = 0, y = 0; //DIV坐标
        var xStep = yStep = 5; //坐标每次移动的距离
        //标记DIV在X、Y轴的移动方向(true,true表示向浏览器的右下角移动)
        var xDirection = true, yDirection = true;
        //根据Id获取控件
        function $(id) { return document.getElementById(id) };    function changePosition() {
          var divPosition = $("divFloat");
          x = x + xStep * (xDirection ? 1 : -1);
          y = y + yStep * (yDirection ? 1 : -1);
         
          //若超出浏览器的宽度反向移动
          if (x <= 0) xDirection = true;
          if (x >= (document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth) - divPosition.offsetWidth) xDirection = false;      if (y <= 0) yDirection = true;
          if (y >= (document.documentElement ? document.documentElement.clientHeight : document.body.clientHeight) - divPosition.offsetHeight) yDirection = false;      //Div重新定位
          divPosition.style.top = y + "px";
          divPosition.style.left = x + "px";
        }
        setInterval("changePosition()", 100);
      </script></body>
    </html>