松软科技Web课堂:JavaScript HTML DOM 动画
基础页面
为了演示如何通过 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 动画的更多相关文章
- 松软科技Web课堂:JavaScript JSON
JSON 是存储和传输数据的格式. JSON 经常在数据从服务器发送到网页时使用. 什么是 JSON? JSON 指的是 JavaScript Object Notation JSON 是轻量级的数据 ...
- 松软科技web教程:JavaScript HTML DOM 元素
查找 HTML 元素 通常,通过 JavaScript,您需要操作 HTML 元素. 为了达成此目的,您需要首先找到这些元素.有好几种完成此任务的方法: 通过 id 查找 HTML 元素 通过标签名查 ...
- 松软科技Web课堂:JavaScript this 关键词
实例 var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : fu ...
- 松软科技Web课堂:JavaScript 异常
JavaScript 错误 - Throw 和 Try to Catch try 语句使您能够测试代码块中的错误. catch 语句允许您处理错误. throw 语句允许您创建自定义错误. final ...
- 松软科技Web课堂:JavaScript 正则表达式
正则表达式是构成搜索模式的字符序列. 该搜索模式可用于文本搜索和文本替换操作. 什么是正则表达式? 正则表达式是构成搜索模式(search pattern)的字符序列. 当您搜索文本中的数据时,您可使 ...
- 松软科技Web课堂:JavaScript 类型转换
Number() 转换数值,String() 转换字符串,Boolean() 转换布尔值. JavaScript 数据类型 JavaScript 中有五种可包含值的数据类型: 字符串(string) ...
- 松软科技Web课堂:JavaScript Break 和 Continue
break 语句“跳出”循环. continue 语句“跳过”循环中的一个迭代. Break 语句 在本教程稍早的章节中,您已见到了 break 语句.它被用于“跳出” switch 语句. brea ...
- 松软科技Web课堂:JavaScript For 循环
循环可多次执行代码块. JavaScript 循环 假如您需要运行代码多次,且每次使用不同的值,那么循环(loop)相当方便使用. 通常我们会遇到使用数组的例子: 不需要这样写: text += ca ...
- 松软科技web课堂:JavaScript If...Else 语句
条件语句用于基于不同条件执行不同的动作. 条件语句 在您写代码时,经常会需要基于不同判断执行不同的动作. 您可以在代码中使用条件语句来实现这一点. 在 JavaScript 中,我们可使用如下条件语句 ...
随机推荐
- Python开发坦克大战
Python不仅能开发网站,爬虫数据分析等,他其实也可以写游戏,接下来就给大家分享下坦克大战的代码: PS:很多人在学习Python的过程中,往往因为遇问题解决不了或者没好的教程从而导致自己放弃,为此 ...
- poj-2253(最小瓶颈路问题)
题目链接 Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fion ...
- 【Python】字符串操作符
- sql 应用记录
SELECT * FROM (select aa.*,bb.mentalvisitid, ' then '家庭访视' else '电话' end as BCSFXS ,bb.visitdate, ' ...
- OmniGraffle原型案例 | 某APP产品原型PDF文件分享之二
1.从 App 首页进入商城 App底部 Tab有社区.商城,我们点击「商城」进入「乐宠商城」,下面简称商城.商城采用的是经典的宫格式导航设计(还有普通列表式.和瀑布流列表式.或两者皆有等),主要有搜 ...
- form介绍
form组件的主要功能: 1.生成可用的html标签 2.对用户提交的数据进行效验 3.保留上次输入的内容 1.以普通方式手写注册功能 1.渲染前端标签获取用户输入 >>>>渲 ...
- 第三十四篇 玩转数据结构——哈希表（HashTable）
1.. 整型哈希函数的设计 小范围正整数直接使用 小范围负整数整体进行偏移 大整数,通常做法是"模一个素数" 2.. 浮点型哈希函数的设计 转成整型进行处理 3.. 字符串 ...
- python 批量编译 批量删除
把项目的py文件变异成pyc文件,好处是可以保护源码不泄露. 假如一个工程文件夹有1000个py文件,这个时候怎样快速处理 ? 两步走: ① py--->pyc python -m compi ...
- 图的bfs遍历模板（邻接矩阵存储和邻接表存储）
bfs遍历图模板伪代码: bfs(u){ //遍历u所在的连通块 queue q; //将u入队 inq[u] = true; while (q非空){ //取出q的队首元素u进行访问 for (从u ...
- 【音乐欣赏】《紅蓮華》 - LiSA
曲名:紅蓮華 作者:LiSA [00:00.92]強くなれる理由を知った [00:07.34]僕を連れて 進め [00:18.74]泥だらけの走馬灯に酔う [00:24.37]強張る心 震える手は [ ...