指点下，关于浮动图片的问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script  type="text/javascript">
    var x=50;  var y=60;  // 浮动图片初始位置    var xin=true; var yin=true;  //xin为真图片向右移动，否则相反  yin为真图片想下移动，否则相反
    var step=1;    //每次移动的距离
    var  time=10;  //过多久图片移动一次（移动的时间间隔）       function movePic(){
          var L=T=0; //L是左边界 T是上边界
          var R=document.body.offsetWidth-document.getElementById("Layer1").offsetWidth;//R是层移动右边界 T是上边界
          var B=document.body..offsetHeight-document.getElementById("Layer1").offsetHeight;//B是层移动下边界
                document.getElementById("Layer1").style.left=x;
                document.getElementById("Layer1").style.top=y;
                x=x+step*(xin?1:-1);                if(x<L){
                         xin=true; x=L;
                  }else if(x>R){
                         xin=false; x=R;
                  }
                   y=y+step*(yin?1:-1);
                if(y<T){
                          yin=true; y=T;
                  }else if(y>B){
                          yin=false; y=B;
                  }
          setTimeout("movePic()",time);
}</script>
</head>
<body  onLoad="movePic()">
 <div id="Layer1" style="position:absolute;left:149px;top:37px;width:89px;height:69px;z-index:1;"><img src="images/move1.jpg" width="88" height="96"> </div>
</body>
</html>怎么我的没有实现图片在窗口内游动，我要的效果是，图片在页面里浮动，游走。但是我试了，报错在<body  onLoad="movePic()">请大家指教哦

解决方案 »

  1.   

    var B=document.body..offsetHeight-document.getElementById("Layer1").offsetHeight;//B是层移动下边界
    这句有问题：多了一个点儿
    var B=document.body.offsetHeight-document.getElementById("Layer1").offsetHeight;
      

  2.   

    下面的是我帮你编写的一个Element对象，可以实现你上面的功能，调用方式很简单：
    Element.fxFloat("element_id");最后的算法有点复杂，可以参考注释中的原始算法。源代码如下：var Element = function (el) {
        var goRight = true,
            goDown  = true,
            doc        = document;    el = typeof el === "string"? doc.getElementById(el): el;    var fxFloat = function() {
            var left  = parseInt(el.style.left),
                top   = parseInt(el.style.top),
                xDiff = doc.body.clientWidth - left,
                yDiff = doc.body.clientHeight - top;
            // set default XY coordinate if not set
            left = isNaN(left)? 0: left;
            top  = isNaN(top) ? 0: top;
            // control x coordinate
            // This is the original algorithm
            /*if(goRight) {
                if(xDiff === el.offsetWidth || !goRight) {
                    left--;
                    goRight = false;
                } else {
                    left++;
                }
            } else {
                if(xDiff === doc.body.clientWidth) {
                    left++;
                    goRight = true;
                } else {
                    left--;
                }
            }*/
            // this is improved algorithm, but more complicated
            if(goRight) {
                left++;
                goRight = (xDiff > el.offsetWidth);
            } else {
                left--;
                goRight = (xDiff == doc.body.clientWidth);
            }
            // control y coordinate
            // This is the original algorithm
            /*if(goDown) {
                if(yDiff === el.offsetHeight) {
                    top--;
                    goDown = false;
                } else {
                    top++;
                }
            } else {
                if(yDiff === doc.body.clientHeight) {
                    top++;
                    goDown = true;
                } else {
                    top--;
                }
            }*/
            // this is improved algorithm, but more complicated
            if(goDown) {
                top++;
                goDown = (yDiff > el.offsetHeight);
            } else {
                top--;
                goDown = (yDiff == doc.body.clientHeight);
            }
            // set position
            el.style.left = left + "px";
            el.style.top  = top  + "px";
            // set timer
            setTimeout(arguments.callee, 10);
        }
        return {
            fxFloat: fxFloat
        };
    };下面是在网页中如何使用的实例代码：<div id="object" style="position:absolute;  width: 100px; height: 100px; background-color: red"></div>
    <script type="text/javascript">
    //
    // 把上面的Elements对象的源代码粘贴到这里
    //
    window.onload = function() {
        // 调用Element对象使ID值为object的HTML元素具有浮动效果
        Element("object").fxFloat();
    };
    </script>