JavaScript学习笔记（DOM动画）

傷城~ 2023-02-12 13:23 23阅读 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>

下面来看一下效果：

![在这里插入图片描述][20200526115817391.gif_pic_center]

[20200526115817391.gif_pic_center]: https://img-blog.csdnimg.cn/20200526115817391.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，23人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript学习笔记（二十）DOM动画效果

function move( ele , attr , target)\{ // 1. 关闭开启定时器; clearInterval( ele.timer ); e

喜欢ヅ旅行/ 2023年10月06日 15:52/ 0 赞/ 34 阅读

相关 JavaScript学习笔记（十四）DOM

DOM（下） DOM 就是我们 html 结构中一个一个的节点构成的不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点 DO

Bertha 。/ 2023年10月06日 15:43/ 0 赞/ 37 阅读

相关 JavaScript学习笔记（DOM动画）

学习使用 JavaScript 来创建 HTML 动画。 -------------------- 动画 <style> container{

傷城~/ 2023年02月12日 13:23/ 0 赞/ 24 阅读

相关 JavaScript学习笔记（DOM-改变HTML）

HTML DOM 允许Javascript改变HTML元素的内容。改变 HTML 输出流 JavaScript 能够创建动态 HTML 内容： Tue May 2

客官°小女子只卖身不卖艺/ 2023年02月12日 12:20/ 0 赞/ 18 阅读

相关学习笔记 JavaScript 动画加速

[学习笔记 JavaScript 动画加速][JavaScript _]

╰+哭是因爲堅強的太久メ/ 2023年02月10日 05:15/ 0 赞/ 105 阅读

相关学习笔记 JavaScript 动画

[ 学习笔记 JavaScript

偏执的太偏执、/ 2023年02月10日 01:20/ 0 赞/ 80 阅读

相关 Javascript学习笔记7 DOM2和DOM3

样式 style对象任何支持style特性的HTML元素在Javascript中都有个style属性。其包含着通过HTML的style特性指定的所有样式信息（不包

àì夳堔傛蜴生んèń/ 2022年05月29日 13:05/ 0 赞/ 202 阅读

相关 Javascript学习笔记6 DOM扩展

选择符API querySelector() 接受一个CSS选择符，返回与该模式匹配的第一个元素，没有找到返回null var mydiv = docume

客官°小女子只卖身不卖艺/ 2022年05月29日 12:47/ 0 赞/ 193 阅读

相关 Javascript学习笔记5 DOM

DOM：文档对象模型，针对HTML和XML文档的一个API，DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构 Node类型所有的节点类型都继承自No

喜欢ヅ旅行/ 2022年05月29日 06:05/ 0 赞/ 259 阅读

相关学习笔记——JavaScript操作DOM

DOM的核心对象 /\Document对象及其方法\/ 只有Document对象的方法可以在页面上查找、创建、删除元素查找一个或多个元素

缺乏、安全感/ 2022年03月19日 09:50/ 0 赞/ 301 阅读