|
我们在Javascript教程中曾学过图片变换。用这个命令就可以制作出神奇的动画效果。
我们首先制作了一个动画的例子。你可以先看一下这个例子，以及完整的JavaScript代码。然后我们一起来研究这个动画是怎么做的。
<html>
<head>
<title>Fuge generator</title>
<script language="JavaScript">
// make the array of images
bendyList = new Array('bendy000.gif', 'bendy001.gif', 'bendy002.gif',
'bendy003.gif', 'bendy004.gif', 'bendy005.gif', 'bendy006.gif',
'bendy007.gif', 'bendy008.gif', 'bendy009.gif', 'bendy010.gif',
'bendy011.gif', 'bendy012.gif', 'bendy013.gif', 'bendy014.gif');
// daPosition will point to successive images in the bendyList
array
daPosition = 0;
function imageFlip() {
// increment the pointer
if(daPosition == bendyList.length-1) {
daPosition = 0;
} else {
daPosition++;
}
// change the image
document.images['daImg'].src = bendyList[daPosition];
// do it again
setTimeout('imageFlip()', 200);
}
</script>
</head>
<body bgcolor="#000000" onload="imageFlip()">
<div align="center">
<img name="daImg" src="bendy000.gif"
width=110 height=106 border=4></div>
</body>
</html>
|
在正式开始之前，我们先学习一下下面的JavaScript符号，这有助于你理解编码：
| JavaScript符号 |
| // |
生成注释标签 |
| == |
比较两个项目 |
| = |
赋值 |
| ++ |
加1 |
首先你应该理解数组的概念。数组是一系列项目的列表。数组通常有一个名字。
在一下代码中，我们生成一个名为bendyList的图象数组。
这些图象将用于动画实例中。在数组括号内我们按照动画中图象显示的顺序列出了所有图象名称：
// make the array of images
bendyList = new Array(bendy000.gif , bendy001.gif , bendy002.gif ,
bendy003.gif , bendy004.gif , bendy005.gif , bendy006.gif ,
bendy007.gif , bendy008.gif , bendy009.gif , bendy010.gif ,
bendy011.gif , bendy012.gif , bendy013.gif , bendy014.gif );
你可以看到每个图象都用逗号隔开。而且这些图象都放在一个目录中。
|
