1、常用的函数
在动画程序中经常使用的函数有setTimeout( function, duration)、setInterval(function, duration)、clearTimeout(setTimeout_variable)。
setTimeout( function, duration)：这个函数从现在开始duration毫秒后调用function函数。就是指定时间后调用执行函数。
setInterval(function, duration)：这个函数在每duration毫秒后调用function函数。就是定时调用执行函数。
clearTimeout(setTimeout_variable)：这个函数取消由setTimeout()方法执行的函数调用。setTimeout_variable是setTimeout()的返回值。
2、设置DOM元素位置
JavaScript还可以设置DOM对象的许多属性，包括它在屏幕上的位置。可以设置一个对象的top和left属性来改变元素在屏幕的位置。
例如，
// 设置到屏幕左边缘的距离。 object.style.left ="11px";//以像素或点为单位的距离 //或者 // 设置到屏幕上边缘的距离。 object.style.top = "22px";//以像素或点为单位的距离
3、点击按扭实现移动效果
通过点击按钮执行事件函数，将left左边距离增加15px，从而实现图片元素向右移动。
例如，
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 15 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/cjavapy.gif" />
<p>点击下面的按钮，向右移动图片</p>
<input type = "button" value = "移动" onclick = "moveRight();" />
</form>
</body>
</html>
4、定时实现移动效果
通过setTimeout()实现定时执行，将left左边距增加10px，从而实现图片元素自动向右移动。
例如，
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
//还可以考虑增加left的值判断，超出可视区域，进行left值的重置
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,50); // 每50毫秒调用执行moveRight一次
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/cjavapy.gif" />
<p>点击下面的按钮来开始动画</p>
<input type = "button" value = "开始" onclick = "moveRight();" />
<input type = "button" value = "重置" onclick = "stop();" />
</form>
</body>
</html>
4、通过鼠标移动事件更改图片地址
通过onMouseOver和onMouseOut事件，实现鼠标滑过改变图片地址。
例如，
<html>
<head>
<title>鼠标滚动事件</title>
<script type = "text/javascript">
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/cjavapy.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
</script>
</head>
<body>
<p>将鼠标移到图像上查看结果</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/cjavapy.gif" />
</a>
</body>
</html>