第十章用javascript实现动画效果

最新推荐文章于 2024-04-18 09:43:47 发布

Agrass啊草

最新推荐文章于 2024-04-18 09:43:47 发布

阅读量650

点赞数

文章标签： javascript dom

本文链接：https://blog.csdn.net/unaMattin/article/details/53434667

版权

<html>
<head>
    <title>用javascript实现动画效果</title>
</head>
<body>
    <p id="message">Una Mattin</p>

</body>
<script type="text/javascript">

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

    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";
        //相隔2秒执行moveMessage函数.....
        //在2秒钟的时间里，随时可以clearTimeout(movement)取消这一跳跃行
    //  movement=setTimeout("moveMessage()",2000);

        //调用 moveElement
       moveElement('message',200,20,20);

    }
    /*
        movement变量对应着在positionMessage函数里定义的setTimeout调用。
        它并没有用var 声明，是一个全局变量。
        这意味着那个“跳跃”行为可以在positionMessage函数以外的地方被取消。

    */


    //实现渐变的动画
    function moveMessage(){
        //检测
        if (!document.getElementById)return false;
        if (!document.getElementById("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);
    }
    /* moveMess()函数使得message元素以每次1像素的方式在浏览器窗口里移动。
      一旦这个元素的top和left属性同时等于100px和200px,这个函数就停止执行。
     */



    //对函数进行抽象
    //elemenId  你要移动的对象 
    //final_x和_y指的是移动目的地坐标
    //interval   多少毫秒调用一次

    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_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,10);
}

    addLoadEvent(positionMessage);
    /*
        后面还有一个动画效果的demo，没写。
        知识点其实是差不多，安全机制优化，html优化，前面的章节已经理解。
    */



</script>   
</html>