动画的基本原理

最新推荐文章于 2021-07-28 22:37:50 发布

a63438840

最新推荐文章于 2021-07-28 22:37:50 发布

阅读量986

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/shanlu0000/p/11256644.html

版权

<!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").οnclick=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

转载于:https://www.cnblogs.com/shanlu0000/p/11256644.html

a63438840

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫