简单的移动

bbbbb

<style type="text/css">
    div{border:1px solid #ccc;}
    #a{width:500px;height:500px;position:relative;}
    #b{width:100px;height:100px;position:absolute;}
</style>
<script type="text/javascript">
    function movelement(elementId, final_x, final_y, interval){
        if(!document.getElementById(elementId)){ return false; }
        var element = document.getElementById(elementId);
        if(!element.style.top){
            element.style.top = 0;
        }
        if(!element.style.left){
            element.style.left = 0;
        }
        xpos = parseInt(element.style.top);
        ypos = parseInt(element.style.left);
        if(xpos == final_x && ypos == final_y){
            return true;
        }
        if(xpos < final_x){
            var dlist = Math.ceil((final_x - xpos)/10);
            xpos = xpos + dlist;
        }
        if(xpos > final_x){
            var dlist = Math.ceil((xpos - final_x)/10);
            xpos = xpos - dlist;
        }
        if(ypos < final_y){
            var dlist = Math.ceil((final_y - ypos)/10);
            ypos = ypos + dlist;
        }
        if(ypos > final_y){
            var dlist = Math.ceil((ypos - final_y)/10);
            ypos = ypos - dlist;
        }
        
        element.style.top = xpos + "px";
        element.style.left = ypos + "px";
        
        var repeat = "movelement('" + elementId + "'," + final_x + "," + final_y + "," + interval + ")";
        var mov = setTimeout(repeat, 20);
    }
</script>
</head>


<div id="a">
  <div id="b">bbbbb</div>
</div>
<script type="text/javascript">
    movelement("b", 200, 200, 20);
</script>