基础页面

为了演示如何通过 JavaScript 来创建 HTML 动画，我们将使用一张简单的网页：

实例

<!DOCTYPE html>

<html>

<body>

<h1>我的第一部 JavaScript 动画</h1>

<div id="animation">我的动画在这里。</div>

</body>

</html>

创建动画容器

所有动画都应该与容器元素关联。

实例

<div id ="container">

    <div id ="animate">我的动画在这里。</div>

</div>

为元素添加样式

应该通过 style = "position: relative" 创建容器元素。

应该通过 style = "position: absolute" 创建动画元素。

实例

#container {

    width: 400px;

    height: 400px;

    position: relative;

    background: yellow;

}

#animate {

    width: 50px;

    height: 50px;

    position: absolute;

    background: red;

}

动画代码

JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。

这种变化通过一个计数器来调用。当计数器间隔很小时，动画看上去就是连贯的。

基础代码是：

实例

var id = setInterval(frame, 5);

function frame() {

    if (/* 测试是否完成 */) {

        clearInterval(id);

    } else {

         /* 改变元素样式的代码 */

    }

}

使用 JavaScript 创建动画

实例

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';

        }

     }

}

松软科技Web课堂:JavaScript HTML DOM 动画的更多相关文章

  1. 松软科技Web课堂:JavaScript JSON

    JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...

  2. 松软科技web教程:JavaScript HTML DOM 元素

    查找 HTML 元素 通常,通过 JavaScript,您需要操作 HTML 元素. 为了达成此目的,您需要首先找到这些元素.有好几种完成此任务的方法: 通过 id 查找 HTML 元素 通过标签名查 ...

  3. 松软科技Web课堂:JavaScript this 关键词

    实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...

  4. 松软科技Web课堂:JavaScript 异常

    JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...

  5. 松软科技Web课堂:JavaScript 正则表达式

    正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...

  6. 松软科技Web课堂:JavaScript 类型转换

    Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...

  7. 松软科技Web课堂:JavaScript Break 和 Continue

    break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...

  8. 松软科技Web课堂:JavaScript For 循环

    循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...

  9. 松软科技web课堂:JavaScript If...Else 语句

    条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...

随机推荐

  1. 为QT应用程序添加图标 转

    第1,第2种方法经本人验证可行 1:通过qmake生成makefile实现过程: (1) 找到一张图片.ico,名字改为myappico.ico: (2) 创建一个新的文本文档,内部添加  IDI_I ...

  2. 谷歌浏览器安装apizza

    接口测试是卡发中不可缺少的一环,那么常用的postman是英文就很不方便一些小伙伴的使用,所以此工具和postman功能相同且升级并且是中文模式 安装: 链接:https://pan.baidu.co ...

  3. Spring - Spring Boot - Thymeleaf - textual 模式

    概述 thymeleaf 的 text 模式简单使用 过程会比较啰嗦, 需要结论的同学, 可以直接到底部去寻找 背景 想尝试做一个简单的 模板工具 目的 自动生成一些简单的 重复文本 思路 尽量简单 ...

  4. [Codechef - ADITREE] Adi and the Tree - 树链剖分,线段树

    [Codechef - ADITREE] Adi and the Tree Description 树上每个节点有一个灯泡,开始所有灯泡都是熄灭的.每次操作给定两个数 \(a,b\) ,将 \(a,b ...

  5. Oracle 监听器 Listene

    Oracle 监听器 Listener 是一个重要的数据库服务器组件,在整个 Oracle 体系结构中,扮演着重要的作用.它负责管理 Oracle 数据库和客户端之间的通讯,它在一个特定的网卡端口(默 ...

  6. Javaweb项目不需要端口号及项目名的访问配置（已备注）

    1.不需要端口号的配置: 在server.xml中找到节点: <Connector URIEncoding="UTF-8" connectionTimeout="2 ...

  7. 安装MySQL5.7.22遇到的坑

    安装MySQL: 第一步:将压缩包解压后,手动新建名为my.ini的文本文档,代码内容如下: #代码开始[mysql]default-character-set=utf8[mysqld]#skip-g ...

  8. 2D TOOLKIT备忘录

    通过Clip名称更改动画片段 // 通过clip名称获取clip实例 tk2dSpriteAnimationClip clip = childrenAnimator.GetClipByName(&qu ...

  9. DE1-LINUX运行

    在官网下载.img文件:网址:http://download.terasic.com/downloads/cd-rom/de1-soc/linux_BSP/ 写入DE1_SOC_SD.img文件: 打 ...

  10. spring_boot 加入 mybatis

    第一步: <!-- mybatis启动器 自动包含jdbc所以不需要再次引入jdbc依赖 --> <dependency> <groupId>org.mybatis ...