动画基本原理

最新推荐文章于 2020-07-28 22:23:24 发布

python基础教程

最新推荐文章于 2020-07-28 22:23:24 发布

阅读量889

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.csdn.net/stopcpp/article/details/52860315

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章 0 订阅

订阅专栏

动画原理，盒子的offsetleft+步长

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <button>开始</button>
    <div></div>
</body>
</html>
<script>
    //动画原理，盒子的offsetleft+步长
    var btn = document.getElementsByTagName("button")[0];
    var div = document.getElementsByTagName("div")[0];
    var timer = null;
    btn.onclick = function () {
        timer = setInterval(function(){
            if(div.offsetLeft > 400){
                clearInterval(timer);
            }
            div.style.left = div.offsetLeft + 10 + "px";
        },20);
    }
</script>