网页设计 | HTML文件 | 动态HTML文件  | Stylesheets | 图形与字体 | 多媒体 |
浏览器 | Java | JavaScript | Perl
语言 | Backend |

webmonkey/javascript/

 
第3页:
现在开始演示动画
作者:Wendy Owen
现在你已经理解了图象数组的概念。现在我们谈谈在代码
中我们需要实现什么目的。由于标准的HTML就可以引入相
应的图象。所以在JavaScript中我们只需让图象轮流显示
从而形成动画效果。

JavaScript编码中我们将各幅图象轮流显示的过程做成
一个自动进行的程序。以下是相应的编码:

     // change the image
    
    document.images['daImg'].src = bendyList[daPosition]; 
    

该编码告诉浏览器根据变量daPosition的值确定daImg
daPosition指向图象数组bendyList中相应的图象.

daPosition的初始值设置为0,所以如果将初始值插入编码
中,则

    document.images['daImg'].src = bendyList[0]

由于bendyList[0]指向图象bendy000.gif ,所以上面的代
码等于

    document.images['daImg'].src = bendy000.gif

所以代码指向数组中的第1幅图象。接下来我们将生成一个
函数自动循环指向数组中的其它图象。

该函数使用一个"if else"语句将图象位置从初始图象轮流
指向其它的图象,从而生成动画效果。

     function imageFlip() {
    
    // increment the pointer 
    if(daPosition == bendyList.length-1) {
    daPosition = 0; } else { daPosition++; } 

在代码中,只要daPosition的值小于14(因为bendylist
的长度是1畚,而if循环中设定daPosition等于
bendylist.lenth-1,15114时,daPosition的值就
要被还原到0,在daPosition小于14时,daPosition值将
自动加1,然后进入下一个循环。随着daPosition的值增
1,则其指向的图象数组中的图象编号也增加1。当
daPosition等于14时,它的值被返回到0,则它又指向第
一个数组图象bendylist(0)

在载入网页时,网页主体中的onload="imgFlip()" 调用
imgFlip() ,从而实现动画效果。如果你想使动画重复播
放两遍或3遍,你需要再次调用该函数。此处我们用
setTimeout实现重复调用imageFlip()。有关setTimeout
的知识请参考该教程

     // do it again
    setTimeout('imageFlip()', 200); 

一旦过去200毫秒时间,imageFlip()函数就被再次调用。
现在动画即可循环播放了。

第1页:用Javascript制作动画-生成图象数组
第2页:设置图象的位置
第3页:现在开始演示动画
第4页:用Javascript制作的闪烁动画效果