page4.htm

javascript的学习文章

  <tr> 
    <td colspan="2">-<a href="../../1multimedia/index.html">多媒体教程</a></td>
  </tr>
  <tr> 
    <td colspan="2"><a href="../../1-os/index.html">-操作系统</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-e_business/index.html">电子商务</a></td>
  </tr>
  <tr> 
    <td colspan="2">-<a href="../../1-director/index.html">Director</a> </td>
  </tr>
  <tr> 
    <td colspan="2" align="center" bgcolor="#666699"><a href="../../1-download/index.htm"><font color="#FFFFFF">网猴下载</font></a></td>
  </tr>
  <tr> 
    <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" --><b>JavaScript与动画</b><br>
          <br>
          <br>
          <font color="#FF0000">第四页：开始设置 </font> 
          <hr noshade>
          既然你已经了解图片阵列的意义，接下来让我们谈一谈希望利用这段代码实现何种目的。我们都清楚拉入一幅图片并不需要JavaScript脚本，标准的HTML代码就可以完成此项任务。而我们会使用JavaScript按“拉洋片”的方式使其中的图片运动起来。 
          如果你想制作传统的纸制“跳舞姑娘”拉洋片，你会怎么做？你会做出一些纸板，在每个纸板上画出跳舞姑娘的各种形态，并按某种顺序将这些纸板排列起来，以便在翻动图片时产生动画效果。但如果你想把这些纸板寄送给你的朋友，他们如何才能知道正确的顺序呢？那么解决方法就是你在每张纸板后面都用数字做好标记。 
          纳达夫也是利用类似的方法为他前面创建的图片阵列排序的。在显示第一幅图片后，我们需要找到一种方法，以便实现从第一幅图片转到第二幅图片的功能，以及后续的翻转过程，从而形成动画效果。那么下面这行代码就可以实现这一目的：<br>
          <br>
          // change the image<br>
          <br>
          document.images['daImg'].src = bendyList[daPosition];<br>
          <br>
          此代码会告诉浏览器"daImg"的源程序会由daPosition决定，而"daPosition"则会指向在"bendyList"阵列中的某幅图片。因为我们已经对此代码进行了部分解译工作，我们知道"daPosition"会在加载网页时预置到第0幅图片。因此如果我们再加上一个适当的变量，就可以实现图片转换。请看下面这行代码：<br>
          <br>
          document.images['daImg'].src = bendyList[0] 因为我们知道bendyList[0]指的是bendy000.gif这幅图片，因此上面这行代码也可以表示为:<br>
          <br>
          document.images['daImg'].src = bendy000.gif <br>
          <br>
          这就是指向阵列中第一幅图片的代码，下面为了实现动画效果，我们还要添加一个函数。这个被称为"imageFlip"的函数使用"if else"陈述表达式，从而实现了从初始图片位置转移到其它图片位置的效果，这样我们就可以实现“拉洋片”了。该表达式如下： 
          <br>
          <br>
          function imageFlip()<br>
          <br>
          { // increment the pointer if(daPosition == bendyList.length-1) { <br>
          <br>
          daPosition = 0; } else { daPosition++; } <br>
          <br>
          首先让我们看一个这个表达式的"else"部分，本部分的功能是在阵列中将指针从一幅图片指向另一幅图片，它通过"daPosition"实现这一效果。该代码每次给"daPosition"数值加1，直至数值达到14。这样如果"daPosition"是2，下一步它的数值就会变为3，继而指针也会指向bendy003.gif这个图片；如果"daPosition"是3，下一步它的数值就会变为4，继而指针也会指向bendy004.gif这个图片。另外你也发现了，为了让此脚本产生顺序动画效果，你就应该按照阵列中动画的顺序编辑脚本。 
          "if"代码部分相对略显复杂，根据代码，如果"daPosition"等于"bendyList.length-1"，则将"daPosition"的值设为0。"Array.length"这个属性指的是一个阵列中的项目数，而在本例中也就是"bendyList"。我们都知道本例中阵列内有15项，任何会简单算术的人也都知道15-1=14，那么这行代码的意思就是如果"daPosition"的数值为14或指向阵列的最后一项时，就应将"daPosition"设为0，并指向动画的开头。通过这种方法，我们就可以保证当网络“拉洋片”显示到最后一幅图片后，可以自动转到第一幅图片上。 
          但到底什么指令使你的图片能够产生循环呢？这是因为当网页中加载onload="imgFlip()"这段代码时会调用一个函数。如果你希望动画效果重复显示，就必须多次调用该函数。Nadav采用了一种更加简单的方法，即使用"setTimeout"字串而在内部调用imageFlip()，这个代码的表达形式如下： 
          <br>
          <br>
          // do it again<br>
          <br>
          setTimeout('imageFlip()', 200); 经过200毫秒后，imageFlip()函数将被重新调用，这样你就实现了重复显示网络“拉洋片”的效果，因此说现在你已经学会不少创建现代“拉洋片”的JavaScript脚本知识。 
          <br>
          <br>
          <a href="index.htm">首页 </a> 
          <table width="80%" border="0">
            <tr> 
              <td>1）<font color="#FF0000"><a href="page1.htm">电影发展史</a></font></td>
              <td>3）<font color="#FF0000"><a href="page3.htm">设置图片位置 </a></font></td>
            </tr>
            <tr> 
              <td>2）<font color="#FF0000"><a href="page2.htm">创建JavaScript阵列</a></font></td>
              <td>4）<font color="#FF0000">开始设置</font></td>
            </tr>
          </table>
          <!-- #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>