移动浮动图片时如何确定可以看见的页面宽度及高度？

各位大虾： 　　我做了一个可移动的浮动图片页面，该浮动图片在遇到页面边界时应该弹回，但是，当我把代码拷出来，保存为html文件时运行正常，而通过VS2005，浏览时或发布后，如果窗口小于id为mainForm的div，图片会超出边界而不弹回。
　　这是为什么，在asp.net中如何才能实现浮动图片遇边界弹回的功能？　　还望各们高人能给以指点，谢谢！ 源码如下：
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!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>
    <style>
    #mainForm
    {
      background-color:#aFCFaF;
    }
    #float_icon
    {
    width:120px;height:140px;
    visibility:visible;position:absolute;left:0;TOP=0;
    }
    #tenYearsClose    {
    font-size:12px;font-family:宋体;text-align:center;
    }
    </style>
    <script type="text/javascript">
    function onC()
    {
        var s="网页可见区域宽："+ document.body.clientWidth;
        s += "<br>网页可见区域高："+ document.body.clientHeight;
        s += "<br>网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条)";
        s += "<br>网页可见区域高："+ document.body.offsetHeight +" (包括边线)";
        s += "<br>网页正文全文宽："+ document.body.scrollWidth;
        s += "<br>网页正文部分上："+ window.screenTop;
        s += "<br>网页正文部分左："+ window.screenLeft;
        s += "<br>屏幕分辨率的高："+ window.screen.height;
        s += "<br>屏幕分辨率的宽："+ window.screen.width;
        s += "<br>屏幕可用工作区高度："+ window.screen.availHeight;
        s += "<br>屏幕可用工作区宽度："+ window.screen.availWidth;
        s += "<br>你的屏幕设置是   "+ window.screen.colorDepth   +"   位彩色";
        s += "<br>你的屏幕设置   "+ window.screen.deviceXDPI   +"   像素/英寸";
        s += "<br>网页真实宽：" + document.documentElement.scrollWidth;
        s += "<br>网页真实高："+ document.documentElement.scrollHeight;
        ddd.innerHTML=s;
    }
    
    
    function adClose()
    {
      float_icon.style.visibility = "hidden";
        clearInterval(MyFloating);
    }
    var dirX=2,dirY=2;
    var xPos = 0, yPos = 0;
    
    //该函数用于移动浮动图片
    function moveIcon()
    {
 
      xPos += dirX;
      yPos += dirY;
      
      float_icon.style.top = yPos ;
      float_icon.style.left = xPos;
      
      //图片超出页面边界时，将图片拉回到图片边界的位置，以防止窗口拖小时，图片暂时不可见的情况
       if((yPos+float_icon.offsetHeight)>=document.body.clientHeight) 
           yPos = document.body.clientHeight - float_icon.offsetHeight;
       if((xPos+float_icon.offsetWidth)>=document.body.clientWidth) 
           xPos = document.body.clientWidth - float_icon.offsetWidth;
       
      //图片超出边界时反方向移动 
      if(xPos<=0 || xPos == (document.body.clientWidth - float_icon.offsetWidth))
        dirX = -dirX;      
      if(yPos<=0 || yPos == (document.body.clientHeight - float_icon.offsetHeight))
        dirY = -dirY;    }
    
     function FloatingStop()
    {
        clearInterval(MyFloating);
    }
    function FloatingStart()
    {
        MyFloating=setInterval("moveIcon()",10);
    }
    
    FloatingStart(); 
    </script>
</head>
<body style="text-align:center">
    <form id="form1" runat="server">
        <div id="float_icon" onMouseOver="FloatingStop();" onMouseOut="FloatingStart();" >
            <div id="tenYearsImg">
                <a href="ADPages/10Years.aspx" target="_blank">
                    <img src="images/10year.jpg" />
                </a>
            </div>
            <div id="tenYearsClose">
                <a href="#" onclick="adClose()">关闭</a>
            </div>
        </div>
        <div id="mainForm" style="width: 500px; height: 700px;">
            <input id="inp" type="button" value="input" onclick="onC()" />
            <div id="ddd">
            </div>
        </div>
    </form>
</body>
</html>

解决方案 »

  1.   

    <!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>试一下！
      

  2.   

    问题已解决，
    标准下使用 
    document.documentElement.clientWidth 
    非标准下使用 
    document.body.clientWidth散分，大家来拿！
      

  3.   


    原来HTML里是document.body 
    XHTML里是document.documentElement 
    都指的是 <body> 节点(OR元素) 
    可以这样兼容： function   getBodyObj() 
    { 
    return   (document.documentElement)   ?   document.documentElement   :   document.body   ; 
    }
      

  4.   

    //Html是否为标准化书写,是标准,返回真
    System.TourNormal = function(){
    if ( System.MsieIf ) {
    return (!(document.documentElement.clientWidth == 0))
    }else{
    return (!(document.documentElement.clientHeight == document.documentElement.offsetHeight))
    }
    }()IE5。5，无论你写什么DOCTYPE都是非标准而<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">也是标准，并非必须是XHTML
    //是否是Ie游览器
    System.MsieIf = ( navigator.userAgent.toLowerCase().indexOf("msie") >= 0 )