📄 ani_flipbook.htm
字号:
<!-- check for different collection -->
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="description"
content="Thau's JavaScript Tutorial: Day 1: Not only does Thau give the JavaScript skinny, but he'll have you writing your first script by the end of the day.">
<meta name="keywords"
content="javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource, developer, development, web
development, design, code, geek, warez, free, new, latest, news, tools,
info, tutorials, how-to, builder, web builder, page builder, javascript, hotwired, webmonkey, javascript, javascript tutorial, thau, dave thau, developer resource,
developer, development, web development, design, code, geek, warez, free,
new, latest, news, tools, info, tutorials, how-to, builder, web builder,
page builder">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<title>Webmonkey: javascript: Thau's JavaScript Tutorial: Day 1</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#660099">
<table border="0" cellpadding="0" width="530" celspacing="0">
<tr>
<td width="530"><div align="left"><table border="0">
<tr>
<td><font size="3" color="#0000FF" face="宋体"><a
href="http://www.webmonkey.com.cn/design.html" target="_top">网页设计</a></font></td>
<td><font size="3" color="#0000FF" face="宋体">/<a
href="http://www.webmonkey.com.cn/html.html" target="_top">HTML文件</a></font></td>
<td><font size="3" color="#0000FF" face="宋体"><a
href="http://www.webmonkey.com.cn/dynamic_html.htm" target="_top">/动态HTML文件</a></font></td>
<td><a href="http://www.webmonkey.com.cn/stylesheet.html"><font face="宋体">/样式表</font></a></td>
<td><a href="http://www.webmonkey.com.cn/graphics.html" target="_top"><font size="3"
color="#0000FF" face="宋体">/图形与字体</font></a></td>
<td><a href="http://www.webmonkey.com.cn/multimedia.html" target="_top"><font size="3"
color="#0000FF" face="宋体">/多媒体</font><font size="2" color="#0000FF"
face="宋体"> </font></a></td>
</tr>
<tr>
<td colspan="6"><a href="http://www.webmonkey.com.cn/browsers.html" target="_top"><font
size="3" color="#0000FF" face="宋体">浏览器</font></a><font size="2" color="#0000FF"
face="宋体"><a href="http://www.webmonkey.com.cn/java.html">/Java</a><a
href="http://www.webmonkey.com.cn/javascript.html">/JavaScript</a></font><a
href="http://www.webmonkey.com.cn/perl.html"><font size="2" color="#0000FF"
face="宋体">/<nobr>Perl</nobr></font><font
color="#0000FF" face="宋体">语言</font></a><nobr><font size="2" color="#0000FF"
face="宋体"><a href="http://www.webmonkey.com.cn/backend.html">/Backend</a>/</font><a
href="http://www.webmonkey.com.cn/e_business.htm"><font size="3" color="#0000FF"
face="宋体">电子商务</font></a></nobr></td>
</tr>
</table>
</div><p><font face="宋体"><nobr><!-- FILE PATH NAVIGATION --> <font size="5"><a
href="http://www.webmonkey.com.cn/webmonkey.html"><b>webmonkey</b></a>/<a
href="http://www.webmonkey.com.cn/javascript.html">javascript</a>/tutor/</font></nobr></font></td>
</tr>
</table>
<table border="0" cellpadding="3" width="667" celspacing="0">
<!-- AUTHOR IMAGE --> <!-- BUFFER -->
<tr>
<td rowspan="99" width="12"><font face="宋体"><img
src="http://static.wired.com/webmonkey/images/spacer.gif" width="10" height="1"></font></td>
<td align="right" colspan="2" width="141"><img src="wendy.gif" width="110" height="110"
alt="wendy.gif (2222 bytes)"></td>
<!-- HEADLINE -->
<td width="466"><font color="#FF3300" size="4" face="宋体"><br>
<b>用JavaScript制作动画</b></font><font face="宋体"><br>
<!-- BYLINE --> </font><font face="宋体" color="#000000" size="2">作者：</font><a
href="mailto:wendy@wired.com" title="Send
mail to Wendy Owen"><font size="2"
color="#000000" face="arial, helvetica, sans-serif">Wendy Owen</font></a>
</td>
</tr>
<!-- SEE ALSO LINKS -->
<tr>
<td valign="bottom" width="151"></td>
<td rowspan="99" width="6"></td>
<td valign="top" rowspan="99" bgcolor="#FFFFFF" width="466"><font size="3">我们在<font
face="宋体">Javascript</font>教程中曾学过图片变换。用这个命令<br>
就可以制作出神奇的动画效果。<br>
<br>
我们首先制作了一个动画的<a href="flipbook2_img_flip.html">例子</a>。你可以先看一下这个<br>
例子，以及完整的<a href="ani_flipcode.htm" target="_blank"><font face="宋体">JavaScript</font>代码</a>。然后我们一起来研<br>
究这个动画是怎么做的。
<p>在正式开始之前，我们先学习一下下面的<font
face="宋体">JavaScript</font>符<br>
号，这有助于你理解编码：</p>
<table border="1">
<tr>
<td colspan="2"><font face="宋体">JavaScript</font>符号</td>
</tr>
<tr>
<td><font face="宋体">// </font></td>
<td>生成注释标签 </td>
</tr>
<tr>
<td><font face="宋体">== </font></td>
<td>比较两个项目</td>
</tr>
<tr>
<td><font face="宋体">= </font></td>
<td>赋值</td>
</tr>
<tr>
<td><font face="宋体">++ </font></td>
<td>加<font face="宋体">1</font></td>
</tr>
</table>
<p>首先你应该理解数组的概念。数组是一系列项目的列表。<br>
数组通常有一个名字。 </p>
<p>在一下代码中，我们生成一个名为<font face="宋体"><tt>bendyList</tt></font>的图象数组。<br>
这些图象将用于动画实例中。在数组括号内我们按照动画<br>
中图象显示的顺序列出了所有图象名称： </p>
<pre>
<font face="宋体">// 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 );
</font></pre>
<p>你可以看到每个图象都用逗号隔开。而且这些图象都放在<br>
一个目录中。<br>
<br>
第<font face="宋体">1</font>页：<a href="ani_flipbook.htm">用<font face="宋体">Javascript</font>制作动画－生成图象数组</a><br>
第<font face="宋体">2</font>页：<a href="ani_flipbook3.htm">设置图象的位置</a><br>
第<font face="宋体">3</font>页：<a href="ani_flipbook4.htm">现在开始演示动画</a><br>
第<font face="宋体">4</font>页：<a href="ani_flipbook5.htm">用<font face="宋体">Javascript</font>制作的闪烁动画效果</a></p>
</font>
<p><font size="2" face="宋体"><br>
<!-- AUTHOR TAGLINE --> </font>
</td>
</tr>
</table>
<p><font size="2" face="宋体"><br>
</font></p>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -