js动画——显示位置变化

js

//此效果可用js函数实现：
function moveMessage() {
    if (!document.getElementById) return false
    if (!document.getElementsByTagName("message")) return false
    var elem = document.getElementById("message");
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (xpos == 200 && ypos == 100) return true
    if (xpos < 200) {
        xpos++;
    }
    if (xpos > 200) {
        xpos--;
    }
    if (ypos < 100) {
        ypos++;
    }
    if (ypos > 100) {
        ypos--;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    movement = setTimeout("moveMessage()", 10);
}


//理论上使用上述js函数即可实现效果，但是由于以后可能会用到相似的效果，故一般给予其抽象化：
function moveElement(elementID,final_x,final_y,interval){
    if(!document.getElementById)return false
    if(!document.getElementsByTagName(elementID))return false
    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){
        xpos++;
    }
    if(xpos>final_x){
        xpos--;
    }
    if(ypos<final_y){
        ypos++;
    }
    if(ypos>final_y){
        ypos--;
    }
    elem.style.left=xpos+"px";
    elem.style.top=ypos+"px";
    var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    movement=setTimeout(repeat,interval);
    }
    //以下为调用moveElement()函数显示moveMessage()函数效果的代码：
    function positionMessage(){
        if(!document.getElementById)return false
        if(!document.getElementsByTagName("message"))return false
        var elem=document.getElementById("message");
        elem.style.left="50px";
        elem.style.top="100px";
        moveElement("message",200,100,10);
        }
    addLoadEvent(positionMessage);
//addLoadEvent()函数
function addLoadEvent(func){
    var oldonload=window.onload
    if(typeof window.onload!='function'){
    window.onload=func
    }else{
    window.onload=function(){
    oldonload()
    func()
        }
      }
    }


//moveMessage()函数的抽象化的改进：
    function moveElement(elementID, final_x, final_y, interval) {
        if (!document.getElementById) return false
        if (!document.getElementsByTagName(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) {
            if (xpos < final_x) {
                vardist_1 = Math.ceil((final_x - xpos) / 25)
                xpos = xpos + dist_1
            }
            if (xpos > final_x) {
                vardist_2 = Math.ceil((xpos - final_x) / 25)
                xpos = xpos - dist_2
            }
            if (ypos < final_y) {
                vardist_3 = Math.ceil((final_y - ypos) / 25)
                ypos = ypos + dist_3
            }
            if (ypos > final_y) {
                vardist_4 = Math.ceil((ypos - final_y) / 25)
                ypos = ypos - dist_4
            }
            elem.style.left = xpos + "px"
            elem.style.top = ypos + "px"
            var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"
            movement = setTimeout(repeat, interval)
        }
    }
1、把全局变量movement改变成正在移动的elem元素的属性
2、保留退路，检查elem元素的left和top样式属性是否存在，不存在则赋值
3、Math对象的ceil属性可以把变量的值（浮点数）向“大于”方向舍入为与之最接近的一个整数。语法为：Math.ceil(number)。相对的，Math对象的floor属性可把任意浮点数向“小于”方向舍入为与之最接近的一个整数，round属性可任意浮点数舍入为与之最接近的整数。语法为：Math.floor(number)、Math.round(number)