王雨的JavaScript练习05---js实现动画效果（1）

大家复制源码自己看吧，就是通过DOM操纵元素的位置，然后用setTimeout进行循环。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/addLoadEvent.js"></script>
    <script src="js/positionMessage.js"></script>
    <script src="js/moveElement.js"></script>
</head>
<body>
<p id="message">Whee!</p>
<p id="message2">Whoa!</p>
</body>
</html>

js：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function moveElement(elementID,final_x,final_y,interval) {
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    var elem = document.getElementById(elementID);
    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_y){
        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);
}

function positionMessage() {
    if (!document.getElementById) return false;
    if (!document.getElementById("message")) return false;
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message",125,25,20);
    if (!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "50px";
    moveElement("message2",125,125,20);
}
addLoadEvent(positionMessage);

带注释的js代码：

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function positionMessage() {
    //检查浏览器支持情况，检查文档里面是否有message ID
    if (!document.getElementById) return false;
    if (!document.getElementById("message")) return false;
    //获取message，并设置它具体的style值
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    //调用moveElement函数，传入参数
    moveElement("message",125,25,20);
    //同上
    if (!document.getElementById("message2")) return false;
    var elem = document.getElementById("message2");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "50px";
    moveElement("message2",125,125,20);
}
addLoadEvent(positionMessage);

function moveElement(elementID,final_x,final_y,interval) {
    //检查浏览器支持情况
    if (!document.getElementById) return false;
    if (!document.getElementById(elementID)) return false;
    //取得元素ID值并赋值给elem
    var elem = document.getElementById(elementID);
    //通过parseInt函数把style值转换成number类型
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    //判断xpos ypos是否和最终坐标相等
    if (xpos == final_x && ypos == final_y){
        return true;
    }
    //不相等时候，xpos ypos进行相应的自加一或自减一
    if (xpos < final_x){
        xpos++
    }
    if (xpos > final_y){
        xpos--
    }
    if (ypos < final_y){
        ypos++
    }
    if (ypos > final_y){
        ypos--
    }
    //把xpos ypos赋值给elem的style.left .right，然后再加上px
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    //通过自调用实现重复执行
    var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"
    movement = setTimeout(repeat,interval);

 

posted @ 2017-05-15 22:23  王雨的博客  阅读(149)  评论(0)  编辑  收藏  举报