JavaScript编程艺术-第10章-10.1-动画

10.1—最简单的动画

***代码亲测可用***

动画：让元素位置随着时间而不断地发生变化

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>jiaxinjia</title>
        <script src="script/01.js"></script>
    </head>
    <body >
        <h1>what is your name?</h1>
        <p id="zxc">WDFEVS!</p>
        <img src="img/2.jpg" id="asd" width="50" height="50"/>
    </body>
</html>

JS：

function positionq(){
    var po = document.getElementById("zxc");
    po.style.position="absolute";
    po.style.left = "50px";
    po.style.top = "100px";
    moveElement("zxc", 500, 300, 20);
    
    var po2 = document.getElementById("asd");
    po2.style.position = "absolute";
    po2.style.left = "50px";
    po.style.top = "150px";
    moveElement("asd", 500, 400, 30);
}

function moveElement(element, final_x, final_y, interval){
    var po = document.getElementById(element);
    var xpos = parseInt(po.style.left);
    var ypos = parseInt(po.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++;
    }
    po.style.left = xpos +"px";
    po.style.top = ypos +"px";
    var repeat = "moveElement('"+element+"',"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat, interval);
}

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

addLoadEvent(positionq);

***end***

posted @ 2017-06-22 10:51  小嘉欣  阅读(229)  评论(0)  编辑  收藏  举报