繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 用JavaScript实现动画效果(1)
- HTML/XHTML教程
- 网页经典代码（二)
- 网页经典代码（三)
- 网页经典代码（四）
- 网页经典代码（五）
- 网页经典代码（六）
- JavaScript 中的replace方法
- 我有我主张！随心所欲的定制“弹出窗口”
- JavaScript技术讲座-JavaScript语言概况
- JavaScript技术讲座-基本数据结构
- JavaScript技术讲座-程序构成
- JavaScript技术讲座-基于对象的JavaScript语言
- JavaScript技术讲座-创建新对象
- JavaScript技术讲座-使用内部对象系统
- 网页加密攻略全集
- 防止网页内容被拷贝的方法
- 让JavaScript弹出窗口变得体贴一些
- 轻松弹出无边框网页的Javscrpt代码
- 强制设为首页代码
- 几行代码轻松搞定网页的简繁转换
- 打印网页时去掉页眉页脚
HTML/XHTML教程 中的 用JavaScript实现动画效果(1)
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 66 ::
收藏到网摘: 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
