繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 用JavaScript实现动画效果(1)
- HTML/XHTML教程
- 按颜色分类：红色系（Red）
- 按颜色分类：黄色系（Yellow）
- 网页设计配色精彩十例
- 按形容词分类：可爱、快乐、有趣
- 按形容词分类：柔和、明亮、温和
- 按形容词分类：运动型、轻快
- 按形容词分类：轻快、华丽、动感
- 按颜色分类：蓝紫色系（Purple Blue）
- 按形容词分类：回味、女性化、优雅
- 按形容词分类：简单、时尚、高雅
- 按形容词分类：忠厚、稳重、有品位
- Xhtml第4天:调用样式表
- Xhtml第7天：css入门知识
- Xhtml第1天:选择什么样的DOCTYPE
- Xhtml第10天:div自适应高度
- Xhtml第12天：校验及常见错误
- Xhtml第6天：XHTML代码规范
- Xhtml第5天:head区的其他设置
- Xhtml第8天：CSS布局入门技术
- Xhtml第9天:第一个css布局实例
HTML/XHTML教程 中的 用JavaScript实现动画效果(1)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 64 ::
收藏到网摘: n/a
大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？其实原理是很简单的，主要是使用了一个计时器函数，下面我为大家
演示一个简单的动画的制作过程，通过有关的介绍，大家可以举一反三，做出更多很炫的动画效果。
这个实例的效果是点击网页上的“开始移动”按钮，则其中的指定图层就会从左到右移动，在这个过程中你点击“停止移动”按钮就会停止移动。
<html>
<head>
<title>JavaScript Motion Sample</title>
<script language="JavaScript">
var movingID = null;
var scrolling = false;
function startMove()
{
var left = eval(div1.style.left.replace("px", ""));
if (left < document.body.scrollWidth - 150)
div1.style.left = left + 1;
else
div1.style.left = 10;
movingID = setTimeout("startMove()", 10);
}
function stopMove()
{
clearTimeout(movingID);
}
</script>
评论 (0) All
