动画

动画

代码如下：
//动画js封装，moveElement()函数，需传四个参数，
// elementID添加动画对象的ID，finalX 最终位置的left值，finalY 最终位置的TOP值，
//interval动画的时间间隔，间接反映运动速度；
function moveElement(elementID,finalX,finalY,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);
    var dist = 0;
    //与最终位置相比较，
    if(xpos == finalX && ypos ==finalY){
        return true;
    }
    //产生动画，
    if (xpos<finalX){
        dist = Math.ceil((finalX-xpos)/10);
        xpos =xpos + dist;
    }
    if (xpos>finalX){
        dist = Math.ceil((finalX-xpos)/10);
        xpos =xpos - dist;
    }
    if (ypos<finalY){
        dist = Math.ceil((finalY-ypos)/10);
        ypos =ypos + dist;
    }
    if (ypos>finalY){
        dist = Math.ceil((finalY-ypos)/10);
        ypos =ypos - dist;
    }
    elem.style.left = xpos+"px";
    elem.style.top =ypos +"px";
    var repeat = "moveElement('"+elementID+"',"+finalX+","+finalY+","+interval+")";
    elem.movement =setTimeout(repeat,interval);
    //变量作用域的原因需要把setTimeout(repeat,interval)赋值给当前元素的属性值，
    //而不能赋值给变量，不然在下次移动之前没法进行检查是否有运动队列；
}