动画的基本原理 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #demo{
            width:100px;
            height:100px;
            background-color: pink;
            position:absolute;
            top:30px;
            left:0;
        }
    </style>
</head>
<body>
    <button id="btn">开始</button>
    <div id="demo"></div>
</body>
</html>
<script>
    function $id(id){return document.getElementById(id);}
    var timer=null;
    $id("btn").onclick=function(){
        clearInterval(timer);
        timer=setInterval(function(){
            $id("demo").style.left=$id("demo").offsetLeft+10+"px";
            if($id("demo").offsetLeft>500)
            {
                clearInterval(timer);
            }
        },10)
    }
</script>

 

动画实现原理：

核心原理：通过定时器 setInterval()不断移动盒子位置

实现步骤：

1，获得盒子当前位置 

      demo.offsetLeft

2，让盒子在当前位置加上1个移动距离   

 demo.style.left=demo.offsetLeft +10 +"px"

3，利用定时器不断重复这个操作

4，加一个结束定时器的条件

if(demo.offsetLeft>500)
{
  clearInterval(timer);
}

5，注意此元素需要添加定位，才能使用 element.style.left 

posted @ 2019-07-27 20:44  shanlu  阅读(1069)  评论(0)  编辑  收藏  举报