📄 index.html
字号:
</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="宋体"><br>
</font></p>
<table
width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <font size="3"> <font face="verdana, arial, geneva, sans-serif" size="2"></font></font><font color="#FF0000"><strong><big>动态HTML－制作自由缩放的图象</big></strong></font><font
face="宋体"><br>
<!-- BYLINE --> </font><font color="#000000" size="2" face="宋体">作者：</font><font size="2"
color="#000000"> </font><font size="2" color="#000000" face="arial, helvetica, sans-serif"><a
href="mailto:nadav@hotwired.com" title="Send
mail to Nadav Savio">Nadav Savio</a></font> <font size="3"><b>如何制作<font face="宋体">?</font></b>
</font>
<p><font size="3">让我们从微软的<font
face="宋体">Internet Explorer</font>开始。<font face="宋体"> </font></font></p>
<p><font size="3"></font><font face="宋体" size="3">IE 4.0的<a
href="/webmonkey/html/97/13/index2a.html">文件对象模块</a>使你能够轻松改变网页的<br>
HTML代码，你可以使用任何一种浏览器支持的语<br>
言，例如<a href="http://www.webmonkey.com.cnjava/beginner/j_beginner.html">Java</a>,
<a
href="/webmonkey/geektalk/97/28/index3a.html">VBScript</a>，或者（在本例中）<br>
<a href="../tutor/tutorial1_page1.html">JavaScript</a>。首先我们给图象<tt><img></tt>标签起一个ID<br>
名称，ID名称后面是其CSS属性。</font><font size="3"></font>
</td>
</tr>
</table>
<dl>
<dd>
<pre><font face="宋体"><img id="zoomazoomzoom" style="position: absolute;
left: 10; top: 50; width: 30; height: 30; z-index: 10" src="pike.gif">
</font></pre>
</dd>
</dl>
<p>在<font face="宋体">JavaScript</font>编码中可以这样引用该图象：</p>
<pre><font face="宋体"> document.all('zoomazoomzoom')</font> </pre>
<dl>
<dd>
<p> </p>
</dd>
</dl>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>我们需要建立图象的起始高度和宽度和缩放后的高<br>
度和宽度，以及达到新的高度和宽度尺寸所要采取<br>
的步骤数目。我们用一个缩放程度<font face="宋体">(</font>编码中的<br>
<font face="宋体">daScale)</font>工具宽度计算相应的高度。我们将对象的<br>
名称简化为<font face="宋体"><tt>zoomer</tt>: </font></td>
</tr>
</table>
<dl>
<dd>
<pre><font face="宋体"><script language="javascript">
zoomer = document.all('zoomazoomzoom');
daScale = 1; // this is the proportion of height to width
var startWidth = parseInt(zoomer.style.width); // parseInt removes the 'px'
var startHeight = startWidth * daScale;
var endWidth = Math.round(Math.random() * 800 + 200);
var numSteps = Math.round(Math.random() * 10) + 3; // from 3 to 13 steps
var widthIncrement = (endWidth - startWidth) / numSteps; // size of each step
var inc = 0;
</script>
</font></pre>
</dd>
</dl>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>现在我们已经设置了所有的参数，接下来就是具体<br>
该做的工作的。我们将该函数循环<font face="宋体"><tt>numSteps</tt> </font>次，<br>
每次将<font face="宋体">zoomer</font>的宽度增加<font face="宋体"><tt>widthIncrement</tt></font>个单位。<br>
并且将<font face="宋体">zoomer</font>的高度增加<font face="宋体"><tt>widthIncrement
* <br>
daScale</tt></font>个单位：</td>
</tr>
</table>
<dl>
<dd>
<pre><font face="宋体"><script language="javascript">
function zoom() {
zoomer.style.width = Math.round(startWidth + (widthIncrement * inc));
zoomer.style.height = parseInt(zoomer.style.width) * daScale;
if(inc <= numSteps) {
inc++;
setTimeout('zoom();', 5);
}
}
</script>
</font></pre>
</dd>
</dl>
<a name="ie"></a>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>如果你有<font face="宋体">IE4</font>的话，你就可以查看<a
href="../zoom_ie.html">代码执行的效<br>
果</a>。
<p><b>如果你用的是<font face="宋体">Netscape Communicator -</font>则我<br>
们需要为其编制另外的程序</b>。<font face="宋体">IE 4.0</font>的<font
face="宋体">DOM</font>设计<br>
很周全，而<font face="宋体">Communicator</font>开发了<font face="宋体">layers</font>（分层）技<br>
术。在有了<font face="宋体">IE 4.0</font>之后我就很少研究<font
face="宋体">Netscape</font>的<br>
<font face="宋体">layers</font>。<font face="宋体"> </font></p>
<p>由于无法在<font face="宋体">Netscape</font>改变图象的样式信息，我们必<br>
须采取变通的方法在<font face="宋体">Netscape</font>中生成近似的图象缩<br>
放效果。即使在一个<font face="宋体">layer</font>中，图象也不能直接被<br>
缩放。所以我们必须制作一个比较蹩脚的变通程<br>
序。在每次循环中，我们不得不在该层中放置一个<br>
新的更大的图象。以下是完整的<font face="宋体">Navigator 4.0</font>代<br>
码：
</td>
</tr>
</table>
<dl>
<dd>
<pre><font face="宋体"><layer name="zoomazoomzoom" style="position: absolute; left: 0; top: 0;
z-index: 10"><img src="pike.gif"></layer>
<script language="javascript">
zoomer = document.layers['zoomazoomzoom'];
var daScale = 1;
var startWidth = 10;
var startHeight = startWidth * daScale;
var endWidth = Math.round(Math.random() * 800 + 200);
var numSteps = Math.round(Math.random() * 10) + 3;
var widthIncrement = (endWidth - startWidth) / numSteps;
var inc = 1;
function zoom() {
newWidth = Math.round(startWidth + (widthIncrement * inc));
newHeight = newWidth * daScale;
zoomer.document.write('<img src="pike.gif" width="' + newWidth +
'"height="' + newHeight + '" onload="if(inc <= numSteps) { inc++;
setTimeout(\'zoom();\', 10); }">');
zoomer.document.close();
}
</font></pre>
</dd>
</dl>
<a name="ns"></a>
<table width="357" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>如果你有<font face="宋体">Navigator 4.0</font>并且看了<a
href="../zoom_ns.html">演示</a>，你会觉得<br>
它的缩放效果就有点粗糙。因为在缩放的每一步骤<br>
中都必须连接服务器，并重新下载相同的图象。所<br>
以我用<tt><font face="宋体">setTimeout()</font>迫使服务器在某个缩放步骤中<br>
等待<font face="宋体">10</font>毫秒。否则，除非到最后一个步骤，你将看<br>
不到缩放的效果。</tt><font face="宋体"> </font>
<p>对一个程序必须为两种浏览器编制不同的代码，这<br>
实在让人感到罗嗦。实际上，<font face="宋体">4.0</font>版的浏览器就象<br>
是表面镀金的的鸟，外表很好看，但嗓子却是破<br>
锣。<font face="宋体">4.0</font>版的浏览器过于臃肿，其中添加了许多不<br>
必要的供你，但是它有支持动态<font face="宋体">HTML</font>及其它一些可<br>
以让用户能够对网页施加更多控制的功能，这是其<br>
进步之处。
</td>
</tr>
</table>
<p><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. -->
</font></p>
<p><font face="宋体"><br>
<!-- AUTHOR TAGLINE --> </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. All rights reserved.
</span>
</center>
</body>
<!-- #EndTemplate --></html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -