简单的方法实现 一个div块 从位置a缓移到 位置b

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}

解决方案 »

  1.   

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
    <style>
    div#div1 {display:inline; width:100px; height:100px; background:#f22; position:absolute;}
    </style>
    <input type="button" id="bt_act" value="移" onclick="moveIt(200,300);"/>
    <div id="div1">
    </div>
    <script type="text/javascript">
    function moveIt(x,y){
    $("#div1").animate({ left:x, top:y}); 
    }
    </script>
      

  2.   

    Shelly兄的果然很简单
    不过要引用一个54kb的js文件
    咋看都不值！:)
      

  3.   

    这是我自己写感觉我做的最好，但是可惜不能给自己加分
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
    <head>
    <title></title>
    <style type="text/css">
    .css{
    width:100px;
    height:100px;
    filter:alpha(opacity=50);
    POSITION: absolute;
    left:100px;
    top:100px;
    background: url("http://images.movie.xunlei.com/gallery/432/552e18a73d33cc7cd45b1c3305342481.jpg");
    border-width: 2px;
    border-color: #0000ff;
    border-style: outset;
    }
    </style>
    <script language="javascript">
    var i=100;
    function move(){
    if(i>400){
    clearInterval(intervalID);
    }
    i++;
    document.getElementById("m_id").style.left=i+"px";
    }
    </script>
    </head>
    <body>
    <pre>
    .css{
    width:100px;
    height:100px;
    filter:alpha(opacity=50);
    POSITION: absolute;
    left:100px;
    top:100px;
    background: url("http://images.movie.xunlei.com/gallery/432/552e18a73d33cc7cd45b1c3305342481.jpg");
    border-width: 2px;
    border-color: #0000ff;
    border-style: outset;
    }
    var i=0;
    function move(){
    i++;
    document.getElementById("m_id").style.left=i+"px";
    }
    }</pre>
    <div id="m_id" class="css"></div>
    <script language="javascript">
    var intervalID = setInterval(move,10); 
    </script>
    </body>
    </html>
      

  4.   


    做好静态文件的 cache 
    在一定程度上,是值的.
      

  5.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
        <head>
            <title></title>
            <style type="text/css">
                .css{
                    width:100px;
                    height:100px;
                    filter:alpha(opacity=50);
                    POSITION: absolute;
                    left:100px;
                    top:100px;
                    background: url("http://images.movie.xunlei.com/gallery/432/552e18a73d33cc7cd45b1c3305342481.jpg");
                    border-width: 2px;
                    border-color: #0000ff;
                    border-style: outset;
                }
            </style>
            <script language="javascript">
                var i=100;
                function move(){
                    if(i>400){
                        clearInterval(intervalID);
                    }
                    i++;
                    document.getElementById("m_id").style.left=i+"px";
                }
            </script>
        </head>
        <body>
            <pre>            
    .css{
        width:100px;
        height:100px;
        filter:alpha(opacity=50);
        POSITION: absolute;
        left:100px;
        top:100px;
        background: url("http://images.movie.xunlei.com/gallery/432/552e18a73d33cc7cd45b1c3305342481.jpg");
        border-width: 2px;
        border-color: #0000ff;
        border-style: outset;
    }
    var i=0;
    function move(){
        i++;
        document.getElementById("m_id").style.left=i+"px";
    }
    }</pre>
            <div id="m_id" class="css"></div>
            <script language="javascript">
                var intervalID = setInterval(move,10); 
            </script>
        </body>
    </html>
      

  6.   

    不值 用户浏览这个网页的时候要下载 54k的js文件，你说值不值。