JavaScript学习笔记（DOM动画）

最新推荐文章于 2024-06-10 14:40:17 发布

闪电蛙

最新推荐文章于 2024-06-10 14:40:17 发布

阅读量198

点赞数

分类专栏： # javaScript 文章标签： css3 javascript

本文链接：https://blog.csdn.net/weixin_42893085/article/details/106352222

版权

javaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习使用 JavaScript 来创建 HTML 动画。

动画

<style>
    #container{
        width: 400px;
        height: 400px;
        position: relative;
        background: yellow;
    }
    #animate{
        width: 50px;
        height: 50px;
        position: absolute;
        background-color: red;
    }
</style>
<body>
    <h1>我的第一部 JavaScript 动画</h1>

    <p><button onclick="myMove()">单击我</button></p>

    <div id="container">
        <div id="animate"></div>
    </div>
    <script>
        function myMove(){
            var elem = document.getElementById("animate");
            var pos = 0;
            var id = setInterval(frame,5);
            function frame() {  
                if(pos == 350){
                    clearInterval(id);
                }else{
                    pos ++;
                    elem.style.top = pos + "px";
                    elem.style.left = pos + "px";
                }
            }
        }
    </script>
</body>

下面来看一下效果：

在这里插入图片描述

闪电蛙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（DOM动画）

学习使用 JavaScript 来创建 HTML 动画。动画<style> #container{ width: 400px; height: 400px; position: relative; background: yellow; } #animate{ width: 50px; height: 50px; position: absolute;
复制链接

扫一扫

专栏目录