繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 用JavaScript实现动画效果(1)
- HTML/XHTML教程
- HTML表格标记教程(37):表头的背景图象属性BACKGROUND
- HTML表格标记教程(41):表头的宽度和高度属性WIDTH、HEIGHT
- HTML表格标记教程(36):表头的背景色属性BGCOLOR
- 揭开HTML 5工作草稿的神秘面纱
- 清除网页文字水印的两种简单方法
- W3C公布最新的HTML5标准草案
- XHTML与CSS的面向对象编程
- XHTML三种文件类型声明
- 通过实例掌握BR和P标签的区别
- 网页表格或div层在网页中被撑开解决之道
- 网页设计之网页音乐的实现技巧
- XHTML常用标签介绍
- HTML网页图片标记
- 网页表单设计实例技巧五则
- HTML网页列表标记学习教程
- HTML网页超链接标记
- HTML表单标记教程(4):
- HTML表单标记教程(5):文字域标记
- HTML表单标记教程(2):
- HTML表单标记教程(3):输入标记
HTML/XHTML教程 中的 用JavaScript实现动画效果(1)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 45 ::
收藏到网摘: 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
