Body对象

例1：图片到达边框自动弹走

<html>
  <head>
    <script>
        //两个关于方向的变量
        var dirX = 1;
        var dirY = 1;
        //两个用于改变坐标的变量
        var sjX = 0;
        var sjY = 0;
        function hitWall(){
            sjX += dirX;
            sjY += dirY;
            $("sj").style.top = sjY + "px";
            $("sj").style.left = sjX + "px";
            //sj.offset.Width是获取sj对象当前的X坐标值
            //document.body.clientWidth表示窗口区域的宽度
            if(sjX + $("sj").offsetWidth >= document.body.clientWidth || sjX <= 0)
                dirX = -dirX;
            if(sjY + $("sj").offsetHeight >= document.body.clientHeight || sjY <= 0)
                dirY = -dirY;
        }
        function $(id){
            return document.getElementById(id);
        }
        setInterval("hitWall()", 10);
    </script>    
  </head>
  <!-- body样式中的background-repeat可以控制窗口大于背景图片本身的时候是否重复图片来填充 -->
  <body style="background-image: url('bg1.jpg'); background-repeat: no-repeat">
    <div id="sj" style="position: absolute">
        <span><font style="color: pink">叫我美男子<br></font></span>
        <img src="Zheng.jpg" style="width: 80px">
    </div>
  </body>
<html>