web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果

最新推荐文章于 2021-07-26 08:57:31 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2021-07-26 08:57:31 发布

阅读量387

点赞数 1

本文链接：https://blog.csdn.net/u014785563/article/details/53320576

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

JavaScript DOM编程艺术

10 篇文章 0 订阅

订阅专栏

web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果

1. 动画基础知识

1.位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    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";
    }
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload != 'function'){
            window.onload=func;
        }else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }

    function moveMessage(){
        if(!document.getElementById) return false;
        if(!document.getElementById("message")) return false;
        var elem=document.getElementById("message");
        elem.style.left="200px";
    }

    addLoadEvent(positionMessage);
    addLoadEvent(moveMessage);
    </script>
</head>
<body>
    <p id="message">Where!</p>
</body>
</html>

改变moveMessage里面相应的参数就能进行相应的改变。

2.时间
JavaScript函数setTimeout能够让某个函数在经过一段预定的时间之后才开始执行相应的函数。这个函数带有两个参数：第一个参数往往是一个字符串，其内容是将要执行的那个函数的名字；第二个参数是一个数值，它以毫秒为单位设定了需要经过多长时间后才开始执行第一个参数所给的函数：setTimeout(“function”,interval)
在绝大部分，把这个函数调用赋值给一个变量将是一个好主意：
variable=setTimeout(“function”,interval)；

可以使用clearTimeout(variable)来取消某个正在排队等待执行的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    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";
        movement=setTimeout("moveMessage()",1000);
    }
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload != 'function'){
            window.onload=func;
        }else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }

    function moveMessage(){
        if(!document.getElementById) return false;
        if(!document.getElementById("message")) return false;
        var elem=document.getElementById("message");
        elem.style.left="200px";
    }

    addLoadEvent(positionMessage);

    </script>
</head>
<body>
    <p id="message">Where!</p>
</body>
</html>

这样经过1s之后就会动态地改变了。当然在这段等待的时间内使用clearTimeout(movement);就可以取消当前动画操作

3.时间递增量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    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";
        movement=setTimeout("moveMessage()",1000);
    }
    function addLoadEvent(func){
        var oldonload=window.onload;
        if(typeof window.onload != 'function'){
            window.onload=func;
        }else{
            window.onload=function(){
                oldonload();
                func();
            }
        }
    }

    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);
    }

    addLoadEvent(positionMessage);

    </script>
</head>
<body>
    <p id="message">Where!</p>
</body>
</html>

4.抽象
把这些常数改变为变量，这个函数的灵活性和适用性也会大大地提高。通过对moveMessage函数进行抽象，可以使他变得更为通用。

4.1 创建moveElement函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    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",200,100,20);
    }
    addLoadEvent(positionMessage);
    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_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);



    }



    </script>
</head>
<body>
    <p id="message">Where!</p>
</body>
</html>

通过修改“moveElement(“message”,200,100,20);”里面相应的值，可以做出各种不同的效果

爸爸去哪了2之熊猫三胞胎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之JavaScript DOM编程艺术之用JavaScript实现基础动画效果

web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果1. 动画基础知识1.位置html lang="en">head> meta charset="UTF-8"> title>Documenttitle> script type="text/javascript"> function positionMessage
复制链接

扫一扫