📄 ani_flipbook2.htm
字号:
<!-- check for different collection -->
<html>
<head>
<title>Webmonkey: javascript: Make a JavaScript Flipbook Animation</title>
<meta name="description"
content="Make a JavaScript Flipbook Animation: If you're new to JavaScript, Wendy's animated flipbook tutorial will help you learn about arrays">
<meta name="keywords"
content="javascript, javascript, arrays, animation, flipbook, 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, javascript, arrays, animation, flipbook, developer resource,
developer, development, web development, design, code, geek, warez, free,
new, latest, news, tools, info, tutorials, how-to, builder, web builder,
page builder">
</head>
<body BGCOLOR="#ffffff" TEXT="#000000" link="#0000ff" Vlink="#660099">
<!-- TOP AD BANNER -->
<p><font face="geneva, arial, sans-serif" size="1"><b><font color="#99FFFF" size="2"><a href="../../design/index.html" target="_top">网页设计</a></font><font face="geneva, arial, sans-serif" size="1"> |
</font><a href="../../html/index.html" target="_top"><font color="#0000FF" size="2" face="宋体">HTML</font><font color="#0000FF" size="2">文件</font></a><font face="geneva, arial, sans-serif" size="1"> |
</font><a href="../../dynamic_html/index.html" target="_top"><font color="#0000FF" size="2">动态</font><font face="宋体" color="#0000FF" size="2">HTML</font><font color="#0000FF" size="2">文件</font></a><font face="geneva, arial, sans-serif" size="1"><a href="../../dynamic_html.htm">
</a> | <a href="../../stylesheets/index.html">Stylesheets</a> | </font><font color="#99FFFF" size="2"><a href="../../graphics/index.html" target="_top">图形与字体</a></font><font face="geneva, arial, sans-serif" size="1"> |
</font><font color="#99FFFF" size="2"><a href="../../multimedia/index.html" target="_top">多媒体</a></font><font face="geneva, arial, sans-serif" size="1"> |
</font><small><br>
</small><font color="#99FFFF" size="2"><a href="../../browsers/index.html" target="_top">浏览器</a></font><font face="geneva, arial, sans-serif" size="1"> |
<a href="../../java/index.html">Java</a> | <a href="../../javascript/index.html">JavaScript</a> |
<nobr><a href="../../perl.html">Perl</a></nobr></font></b><small><strong><a href="../../perl/index.html" target="_top"><font size="2">语言</font></a></strong></small><font face="geneva, arial, sans-serif" size="1"><b><nobr> |
<a href="../../backend/index.html">Backend</a> |</nobr></b></font></font></p>
<p><font face="geneva, arial, sans-serif" size="1"><font face="geneva, arial, sans-serif" size="1"><b><nobr>
</nobr></b></font></font><font face="宋体"><nobr><font size="5"><a
href="../../index.html"><b>webmonkey</b></a>/<a
href="../index.html">javascript</a>/</font></nobr></font></p>
<p><br>
<!-- TOP NAVIGATION --></p>
<table CELLPADDING="3" CELSPACING="0" BORDER="0" width="532">
<!-- AUTHOR IMAGE (commented out for PageX) -->
<tr>
<!-- BUFFER -->
<td rowspan="100" width="10"><img
SRC="http://static.wired.com/webmonkey/images/spacer.gif" WIDTH="10" HEIGHT="1"></td>
<td width="165" valign="middle" align="right" colspan="1"><!-- <IMG
SRC="http://static.wired.com/webmonkey/authors/images/wendy.gif"
WIDTH="110" HEIGHT="110" alt="Picture of Wendy Owen"> --></td>
<!-- HEADLINE -->
<td width="365" valign="middle" colspan="2"><font face="arial, helvetica, sans-serif"
size="3" color="#ff3300"><br>
<b><!--Figure out which page title to display --> <b>Page 2: Creating a JavaScript Array </b></b></font><br>
<!-- BYLINE (commented out for PageX) --><!-- <font size=1 color="#000000" face="arial, helvetica, sans-serif">by <a href="mailto:wendy@wired.com" title="Send mail to Wendy Owen">Wendy Owen</a></font>
--> </td>
</tr>
<!-- SEE ALSO LINKS -->
<tr>
<td width="155" align="left" valign="top"><b><font face="arial, helvetica, sans-serif"
size="3">More on javascript</font></b><br>
<font color="#ff3300">- - - - - - - - - -</font> <p><font size="2"
face="arial, helvetica, sans-serif"><b><a
href="/webmonkey/html/97/42/index1a.html?tw=javascript">Make a JavaScript Flipbook
Animation</a></b></font><br>
<font size="2" face="arial, helvetica, sans-serif">If you're new to JavaScript, Wendy's
animated flipbook tutorial will help you learn about arrays <nobr><i>21 Oct 1997</i></nobr></font>
</p>
<p><!-- --> <font size="2" face="arial, helvetica, sans-serif"><b><a
href="/webmonkey/geektalk/96/40/index3a.html?tw=javascript">JavaScript and the Status Bar</a></b></font><br>
<font size="2" face="arial, helvetica, sans-serif">The basic "window.status"
mouseover. Useful, yet overused. <nobr><i>3 Oct 1996</i></nobr></font> </p>
<p><!-- --> <font size="2" face="arial, helvetica, sans-serif"><b><a
href="/webmonkey/html/96/53/index3a.html?tw=javascript">Degrading Pages</a></b></font><br>
<font size="2" face="arial, helvetica, sans-serif">Good Web design is more than just
decoration, it's about smart pages that react to their environment. <nobr><i>2 Jan 1997</i></nobr></font>
<br>
<br>
<img SRC="http://static.wired.com/webmonkey/images/spacer.gif" WIDTH="155" HEIGHT="1"> <!-- SECOND AD UNIT 125x125 --> <font
face="arial, helvetica, sans-serif" size="1" color="#ff0000"><b><advertisement></b></font><br>
<a
href="http://nsads.hotwired.com/event.ng/Type=click&ProfileID=179&RunID=4376&AdID=5688&GroupID=1&FamilyID=429&TagValues=13.25.157.159.169.174.177.181.182.183.184.185.188.196.197.198.199.200.208.213.322.389.411.436.526&Redirect=http://www.adobe.com/newsfeatures/imageready/main.html"
TARGET="_top"><img src="http://static.wired.com/advertising/blipverts/adobe/A5125.gif"
BORDER="1" height="125" width="125" alt="Click here and download Adobe ImageReady now."></a>
<br>
<font face="arial, helvetica, sans-serif" size="1" color="#ff0000"><b></advertisement></b></font>
<!-- THREADS LINK --> <br>
<br>
<font size="2" face="arial, helvetica, sans-serif">Start an animated discussion.<br>
<a href="/cgi-bin/interact/replies_all?msg.54187"><b>In Threads.</b></a></font> <br>
</td>
<!-- BODY COPY -->
<!-- BUFFER -->
<td width="10" rowspan="100"></td>
<td width="357" valign="top" bgcolor="#ffffff" rowspan="100"><font
face="verdana, arial, geneva, sans-serif" size="2"><!--figure out which page content to display --> </font><font size="3"><p><font
face="宋体">For the purposes of this tutorial, we had HotWired design engineer Nadav
Savio create an <a href="/webmonkey/html/97/42/bendy/img_flip.html" target="_blank">example</a>
of a flipbook, based on the code for Taylor and Anna's exhibit. You may want to take a
look at the animation, and you can also check out the <a
href="/webmonkey/html/97/42/code.html" target="_blank">entire JavaScript code</a> to
follow along as we step through how it was done. </font></p>
<p><font face="宋体">Now, before we really get started, this JavaScript cheat sheet will
help you understand the code: </font></p>
<table border="1">
<tr>
<td colspan="2"><font face="宋体">JavaScript symbols </font></td>
</tr>
<tr>
<td><font face="宋体">// </font></td>
<td><font face="宋体">creates comment tags </font></td>
</tr>
<tr>
<td><font face="宋体">== </font></td>
<td><font face="宋体">compares two items </font></td>
</tr>
<tr>
<td><font face="宋体">= </font></td>
<td><font face="宋体">sets a value </font></td>
</tr>
<tr>
<td><font face="宋体">++ </font></td>
<td><font face="宋体">add one </font></td>
</tr>
</table>
<p><font face="宋体">The first thing you need to know in order to build a flipbook is
the definition of an <b>array</b>. An array is just a list of items; each array usually
has a name. </font></p>
<p><font face="宋体">In the code below, Nadav creates an array of images called <tt>bendyList</tt>,
which will include all the images for his flipbook animation. Within parentheses, he lists
all the images - in order - that should be included in that array: </font></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><font face="宋体">As you can see, each new item is set off by apostrophes and a
comma. If you look closely, you'll notice that we put all the images in one directory. </font></p>
</font><p><font size="3"><font face="宋体"><!-- PAGE X LINKS --> <!-- this stuff checks if there are more pages in this story. if so, we'll
suck out the titles of those pages and build links. Right now, the maximum is
15 pages. --> <!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> Page 1: <b><a
href="/webmonkey/html/97/42/index1a.html?tw=javascript">Make a JavaScript Flipbook
Animation</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> Page 2: <b><a href="/webmonkey/html/97/42/index1a_page2.html?tw=javascript">Creating a
JavaScript Array</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> Page 3: <b><a href="/webmonkey/html/97/42/index1a_page3.html?tw=javascript">Setting Image
Positions</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> Page 4: <b><a href="/webmonkey/html/97/42/index1a_page4.html?tw=javascript">Ready, Set,
Flip 'Em</a></b></font></font><font face="verdana, arial, geneva, sans-serif" size="2"><font
size="2" face="arial, helvetica"><br>
</font></font></td>
</tr>
<tr>
<td width="155" valign="bottom"><font size="2" face="arial, helvetica, sans-serif">Want to
print this article? Use <a
href="/webmonkey/templates/print_template.htmlt?meta=/webmonkey/html/97/42/index1a_meta.html"
target="_blank">this</a> version. <p>Questions? Comments? <a
href="mailto:webmonkey@wired.com">Talk</a> to the monkey. </p>
<p>The Webmonkey Secret <a href="/webmonkey/hideout/index.html?tw=hideout">Hideout</a> </font></td>
</tr>
</table>
<p><br>
<br>
</p>
<table width="568" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left"><font face="Arial, Helvetica" size="1"><a
href="http://www.wired.com/home/" target="_top"><img align="left" hspace="0"
valign="baseline" src="http://static.wired.com/meta/footer/w.gif" alt="[W]" height="16"
width="16" border="0"></a>Wired Digital offers <a href="http://www.hotwired.com/"
target="_top">HotWired</a>, <a href="http://www.wired.com/news/" target="_top">Wired News</a>,
<a href="http://www.hotbot.com/" target="_top">HotBot</a>, <a
href="http://www.wired.com/wired/" target="_top"><cite>Wired</cite> magazine</a> online, <a
href="http://www.suck.com/" target="_top">Suck</a>, <a href="http://www.livewired.com/"
target="_top">LiveWired</a>, <a href="http://www.cocktailtime.com/" target="_top">Cocktail</a>,
<a href="http://www.hotwired.com/rough/" target="_top">The Rough Guide</a>, and <a
href="http://www.newsbot.com/" target="_top">NewsBot</a>. <p><a
href="/full.copyright.html" target="_top">Copyright</a> © 1994-98 Wired Digital Inc.
All rights reserved. </font></td>
</tr>
</table>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -