ani_flipbook4.htm

javascript的学习文章

    <td colspan="2">-<a href="../../1-download/page1.htm">网页制作</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<font color="#000000"><a href="../../1-download/page2.htm">程序设计</a></font></td>
  </tr>
  <tr> 
    <td colspan="2">-<font color="#000000"><a href="../../1-download/page3.htm">网站设计</a></font></td>
  </tr>
  <tr> 
    <td colspan="2">-<font color="#000000"><a href="../../1-download/page4.htm">电子商务</a></font> 
    </td>
  </tr>
  <tr> 
    <td colspan="2" align="center" bgcolor="#666699"><a href="../../1-teach/index.htm"><font color="#FFFFFF">实用技巧</font></a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/internet/index.htm">Internet应用</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/photoshop/index.html">Photoshop</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/flash/page1.html">Flash</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/asp/index.html">ASP</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/php/index.html">PHP</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/java/index.htm">Java</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/vb/index.htm">VB</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/c/index.htm">C、C++</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-backend/database/php_mysql/index.html">PHP/MySQL</a></td>
  </tr>
  <tr> 
    <td colspan="2"><a href="../../1-backend/cgi_perl/perl_beginner/index.html">-Perl</a> 
    </td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-teach/other/index.htm">其它</a> </td>
  </tr>
  <tr> 
    <td colspan="2" bgcolor="#666699"> 
      <div align="center"><font color="#FFFFFF">更多教程</font></div>
    </td>
  </tr>
  <tr> 
    <td colspan="2" height="17"><a href="../../1hdml/index.html">-HDML</a></td>
  </tr>
  <tr> 
    <td colspan="2" height="23"><font face="宋体"><a href="../../1-backend/database/course/day1_1.html">-网络数据库</a></font></td>
  </tr>
  <tr> 
    <td colspan="2" height="14"><a href="../../1-backend/protocols/ping/index.html"><font face="arial, helvetica, sans-serif">Ping</font></a></td>
  </tr>
  <tr> 
    <td colspan="2" height="20"><a href="../../1-backend/cgi_perl/search_engine/index.html">-创建搜索引擎</a></td>
  </tr>
  <tr> 
    <td colspan="2" height="16">-<a href="../../1adobe/GoLive/index.html">Adobe GoLive</a></td>
  </tr>
  <tr> 
    <td colspan="2"><a href="../../1-backend/cgi_perl/templates/index.html">模板</a></td>
  </tr>
  <tr> 
    <td colspan="2" align="center" bgcolor="#666699"><font color="#FFFFFF">合作伙伴</font></td>
  </tr>
  <tr> 
    <td colspan="2" align="left">-<a href="http://www.5dmedia.com/" target="_blank">5D精英网</a></td>
  </tr>
  <tr align="center"> 
    <td colspan="2"> <img src="../../Library/front_monkey.gif" width="59" height="68"></td>
  </tr>
  </tbody> 
</table>
<br><!-- #EndLibraryItem --></td>
      <!-- End of headlines (column 1: left column) --> <!-- Gutter between columns 1 and 2 --> 
      <td width="10" height="794"><img src="http://www.sohu.com/images/pixel.gif" width=10></td>
      <!-- Search box and directories (columns 2 and 3: middle columns, combined into one) --> 
      <td align=center valign=top width="558"> 
        <div align="left"><!-- #BeginEditable "1" -->
<p><font size="2" face="宋体"> </font><font color="#FF3300" size="4" face="宋体"><b>第3页：</b></font><b><font color="#FF3300" size="4">现在开始演示动画</font></b><font
    face="宋体"><br>
            <!-- BYLINE --> </font><font face="宋体" color="#000000" size="2">作者：</font><a
    href="mailto:[e-mail]" title="Send
mail to Wendy Owen"><font size="2"
    color="#000000" face="arial, helvetica, sans-serif">Wendy Owen</font></a> 
            现在你已经理解了图象数组的概念。现在我们谈谈在代码<br>
            中我们需要实现什么目的。由于标准的<font face="宋体" size="3">HTML</font>就可以引入相<br>
            应的图象。所以在<font face="宋体" size="3">JavaScript</font>中我们只需让图象轮流显示<br>
            从而形成动画效果。 </p>
          <p><font size="3">在<font face="宋体">JavaScript</font>编码中我们将各幅图象轮流显示的过程做成<br>
            一个自动进行的程序。以下是相应的编码： </font>
          <ul>
            <pre> <font face="宋体" size="3">// change the image

document.images['daImg'].src = bendyList[daPosition]; 
</font></pre>
          </ul>
          <p><font size="3">该编码告诉浏览器根据变量<font face="宋体">daPosition</font><tt>的值确定<font
    face="宋体">daImg</font></tt>。<br>
            <font face="宋体">daPosition</font>指向图象数组<font face="宋体"><tt>bendyList</tt></font>中相应的图象<font
    face="宋体">.</font></font></p>
          <p><font size="3"><tt><font face="宋体">daPosition</font></tt>的初始值设置为<font face="宋体">0</font>，所以如果将初始值插入编码<br>
            中，则 </font>
          <ul>
            <p><tt><font face="宋体" size="3">document.images['daImg'].src = bendyList[0]</font></tt></p>
          </ul>
          <p><font size="3">由于<font face="宋体"><tt>bendyList[0]</tt></font>指向图象<font face="宋体"><tt>bendy000.gif</tt> 
            </font>，所以上面的代<br>
            码等于 </font>
          <ul>
            <p><tt><font face="宋体" size="3">document.images['daImg'].src = bendy000.gif</font></tt></p>
          </ul>
          <p><font size="3">所以代码指向数组中的第<font face="宋体">1</font>幅图象。接下来我们将生成一个<br>
            函数自动循环指向数组中的其它图象。 </font></p>
          <p><font size="3">该函数使用一个<font face="宋体">&quot;if else&quot;</font>语句将图象位置从初始图象轮流<br>
            指向其它的图象，从而生成动画效果。 </font>
          <ul>
            <pre> <font face="宋体" size="3">function imageFlip() {

// increment the pointer 
if(<tt>daPosition</tt> == bendyList.length-1) {
<tt>daPosition</tt> = 0; } else { <tt>daPosition</tt>++; } </font></pre>
          </ul>
          <p><font size="3">在代码中，只要<font face="宋体"><tt>daPosition</tt></font>的值小于<font
    face="宋体">14</font>（因为<font face="宋体">bendylist</font><br>
            的长度是<font face="宋体">1</font>畚，而<font face="宋体">if</font>循环中设定<font
    face="宋体">daPosition</font>等于<br>
            <font face="宋体">bendylist.lenth-1,</font>即<font face="宋体">15</font>－<font
    face="宋体">1</font>＝<font face="宋体">14</font>时，<font face="宋体">daPosition</font>的值就<br>
            要被还原到<font face="宋体">0</font>，在<font face="宋体">daPosition</font>小于<font
    face="宋体">14</font>时，<font face="宋体">daPosition</font>值将<br>
            自动加<font face="宋体">1</font>，然后进入下一个循环。随着<font
    face="宋体">daPosition</font>的值增<br>
            加<font face="宋体">1</font>，则其指向的图象数组中的图象编号也增加<font
    face="宋体">1</font>。当<br>
            <font face="宋体">daPosition</font>等于<font face="宋体">14</font>时，它的值被返回到<font
    face="宋体">0</font>，则它又指向第<br>
            一个数组图象<font face="宋体">bendylist(0)</font>。</font></p>
          <p><font size="3">在载入网页时，<tt>网页主体中的<font face="宋体">onload=&quot;imgFlip()&quot;</font></tt> 
            调用</font><br>
            <font face="宋体" size="3"><tt>imgFlip()</tt></font> 
          ，从而实现动画效果。如果你想使动画重复播<br>
          放两遍或<font face="宋体" size="3">3</font>遍，你需要再次调用该函数。此处我们用<br>
          <font face="宋体" size="3"><tt>setTimeout</tt></font>实现重复调用<font face="宋体" size="3"><tt>imageFlip()</tt></font>。有关<font face="宋体" size="3">setTimeout</font><br>
          的知识请参考该<a href="http://www.hotwired.com/rgb/opp/tut1.html"><font size="3">教程</font></a>。 
          <ul>
            <pre> <font face="宋体" size="3">// do it again
setTimeout('imageFlip()', 200); </font></pre>
          </ul>
          <p><font size="3">一旦过去<font face="宋体">200</font>毫秒时间，<font face="宋体"><tt>imageFlip()</tt></font>函数就被再次调用。<br>
            现在动画即可循环播放了。<br>
            </font><font face="宋体" size="3"><br>
            第1页：<a href="index.html">用Javascript制作动画－生成图象数组</a><br>
            第2页：<a href="ani_flipbook3.htm">设置图象的位置</a><br>
            第3页：<a href="ani_flipbook4.htm">现在开始演示动画</a><br>
            第4页：<a href="ani_flipbook5.htm">用Javascript制作的闪烁动画效果</a></font></p>
          <p><font size="2" face="宋体"><br>
            <!-- AUTHOR TAGLINE --> </font> 
          <p><font size="2" face="宋体"> </font></p>
          <!-- #EndEditable --></div>
      </td>
      <!-- End of search box and directories (columns 2 and 3: middle columns, combined into one) --> 
      <!-- Gutter between columns 3 and 4 --> <!-- Other stuff (column 4: right column) --> 
      <!-- End of other stuff (column 4: right column) --> </tr>
  </table>
<!-- End of table surrounding page contents -->

  <hr noshade size=1 width=700>
 <span class=eng><br>
  Copyright (C) 1998-2000 Internet Technologies China.&nbsp; All rights reserved. 
  </span> 
</center>
</body>
<!-- #EndTemplate --></html>