动态网页制作简介

冯永曜　　黄山村夫 

　　动态HTML（即 DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。国内网络界也掀起了一股学习动态HTML的热潮。所谓动态网页就是采用动态HTML制作出来的具有动态效果的网页。

　　有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、VBScript、Document Object Model（文件目标模块）、Layers和 Cascading Style Sheets（CSS）等。

　　那么，到底什么是动态HTML呢？简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者网页头部能够滑过电脑屏幕。这就是说，HTML中能够做的一切在网页下载后还能够做。动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。比较常用的技术有：

　　（l）脚本编程语言（Javascript， VBScript）

　　（2）文件目标模块（DOM）

　　（3）层叠样式表（CSS）

　　（4）动态图层（layers）

　　Netscape Communicator 4．0以上版本和 Microsoft Internet Explorer（IE） 4．0以上版本，都宣称支持这种最新的动态HTML功能。但实际上，他们所支持的动态HTML内容并不完全相同。

　　IE 4.0所支持的动态 HTML包括以下几部分：

　　（1）层叠样式表（CSS）：提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。在网页下载完毕后，可动态地改变页面元素的CSS属性。

　　（2）动态内容（ Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。

　　（3）动态图像：通过内建的 Animation可以实现动画的效果，另外配合 Javascript、VBScript或ActiVeX控件可以轻松地移动图像。

　　（4）数据库支持：通过动态HTML方便地实现对数据库中数据的访问。从而使网页设计者轻松地处理数据，实现更强大的交互功能。

　　Netscape 4．0所支持的动态 HTML包括以下几部分：

　　（1）层叠样式表（CSS）。

　　（2）脚本排版样式（Javascript Style Sheets）：简称 JSS，这是 Netscape公司为该浏览器内建的一种排版样式，可以通过 Javascript来控制 Style Sheets。

　　（3）动态图层（Dynamic Layers)这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。

　　我们制作动态网页主要是利用CSS定义的属性可以动态改变、图层可以动态定位和在客户端解释执行的Javascript 程序能够实时地操作HTML元素及其属性的特性，才使得网页动起来，与用户的实时交互得以实现。所以，要掌握动态网页制作技术，除了要熟悉CSS、图层应用技术外，还必须学好Javascript语言，并不要求达到熟练编程的水平，而是要达到基本能看懂程序。因为制作动态网页大多采用“拿来主义”，把别人的成果拿来后，不要生吞活咽，而是要细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样你的水平就会很快提高。

　　在制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML对持的程度是不同的，要使网页适应不同的浏览器，在程序中的一些具体操作上要分别设计。如：IE浏览器不支持Layers，但我们可以用DIV来代替，Dreamweaver3中图层给我们做了很好地示范。又如：NS不支持document.all和则我们就要分别设计。如此等等，在本专题中将作详细描述。

JavaScript简介

冯永曜　　黄山村夫 

　　为了使网页能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（文件目标模块）、Layers和 Cascading Style Sheets（CSS），CSS和Lyaer（图层）技术已作过专题介绍，因此在这里主要讲Javascript。那么Javascript是什么东东？Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。 Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 3．0以上版本的浏览器都能支持 Javascript程序，微软公司 Internet Explorer 3．0以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript，称为JScript。 Javascript和Jscript基本上是相同的，只是在一些细节上有出入。 Javascript短小精悍， 又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

　　虽然，在Dreamweaver的Behaviors可以为我们方便地使用Javascript程序而不用编写代码，但我们自己了解了Javascript的编程方法后，将能更加方便灵活地应用，也使Javascript的代码更简练。本专题通过对一系列典型程序的剖析，使你快速地掌握Javascript的编程技巧，设计出质量上乘的动态网页打下坚实的基础。在此之前，我们先了解一些Javascript 的基本概念。

　　一、Javascript在网页的用法

　　Javascript加入网页有两种方法：

　　1、直接加入HTML文档

　　这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：

　　在这个例子中，我们可看到一个新的标签： ，而 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。

　　HTML的注释标签：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持 Javascript 语言的浏览器来说是很有用的。

　　//-Javascript结束：双斜杠表示 Javascript的注释部分，即从//开始到行尾的字符都被忽略。 至于程序中所用到的document．write（）函数则表示将括号中的文字输出到窗口中去， 这在后面将会详细介绍。 另外一点需要注意的是，的位置并不是固定的，可以包含在...... 或.....中的任何地方。 

　　2、引用方式 如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：

　　其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。 如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：

document.writeln("这是Javascript！采用直接插入的方法！");

　　在网页中可以这样调用程序： 。

　　二、Javascript基本概念

　　在这里只作简单介绍，在以后的例子中结程序再作具体解释其作用。

1、运算符

　　运算符就是完成操和的一系列符号，它有七类：

　　赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算、位操作运算符和字符串运算符。

2、表达式

　　运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。

3、语句

　　Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是：

　　赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环中止语句和continue循环中断语句。

4、函数

　　函数是命名的语句段，这个语句段可以被当作一个整体来引用不着和执行。使用函数要注意以下几点：

1）函数由关键字function定义； 

2）函数必须先定义后使用，否则将出错；

3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；

4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量；

5）return语句用于返回表达式的值，也可以没有。

5、对象

　　Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。

　　一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolop，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。

6、事件

　　用户与网页交互时产生的操作，称为事件。绝大部分事都由用户的动作所引发，如：用户按鼠标的按钮，就产生onclick事件，若鼠标的指针的链接上移动，就产生onmouseover事件等等。在Javascript中，事件往往与事件处理程序配套使用。

　　学习Javascript比较快速有效的方法是先熟悉一些基本概念，然后找几个别人设计好的程序认真仔细地分析一遍，再稍作改动，再看看能否达到预期目的，不断地举一反三，既可以加深对一些参数、设计方法的理解，又可以快速地提高自己的水平。另外，再提醒一下：Javascript对大小写是敏感的，特别是一些对象、方法、属性的大小写一定要一致，要养成一种良好的习惯，否则在调试程序时可要累死你了。

网页中的最后修改日期

　冯永曜　　黄山村夫 

　　利用文档对象的一个属性lastModified就可以显示网页最后日期，这一点对一个网站管理者来说是十分有用的。可以在网页中加入相应的函数，自动显示文档的最后修改日期。其实，很多网页都有这段程序，我在这里把这段大家都用的程序作为例子进行剖析，以说明如何对一个Javascript程序举一反三地应用。

　　一、最简单的用法

　　示例：本页最后更新日期： 01/31/2001 16:01:24 

　　这个例子只用了一条语句，请看源代码：

　　这里document.write(document.lastModified)的作用是用document对象的write方法把document对象的lastModified属性值写到文档中。在《Javascript基础》一文中已讲过，对象是一组含有数据的属性和对属性中数据进行操作的方法。这里，document是一个对象，它包含了许多类似lastModified这样的属性，也包含了许多类似于write这样的方法，我想你现在应该对什么是对象、什么是对象的属性和方法有所理解了吧？！那么怎样知道有那些对象，一个对象又有那些属性和方法呢？这只有去查看Javascript的教科书了。

　　二、显示我们习惯的日期

　　示例： 更新日期：2001年1月31日 

　　上例的日期表示方法是按西方人的习惯的，而本例这种写法就符合中国人的习惯了。我们再来看看源代码：

　　本程序的思路：把表示日期的数码从lastModified中分离出来，再加上中文年月日不就行了吗！

　　Javascript的Date类型有相应的方法把日期数码分离出来，所以第一步就声明了一个日期变量“lastdate”，并把document.lastModified作为一日期类型给lastdate赋值。后面就是用相应的方法获取年月日数字了，最后，再用document的write方法把它写入网页文档。在这段程序中加了一句：if (Number(Y) <100) Y="20"+Y;由于比较老一点的机器，年份是用两位数表示，就是所谓的“千年虫”，所以2001年就变成了01年，先把年份由字符变为数值再100比较，若小于100，说明是用两位数表示年份，所以在前面加“20”，若大于100，则是用四位数表示年份，所以就不用改了。

　　获得的月份数为什么要加1呢？这是因为这里的月份是从0开始的，所以要加1，否则1月就变成0月了。由于是数字相加，所以要先把月份用Number函数把字符变为数值。

　　三、可控显示修改日期

　　图1 未按鼠标时的按钮图

　　图2 按下鼠标后的按钮图

　　这个例子中，只有你按下按钮才显示更新日期，而当你鼠标移开按钮时，更新日期又不见了。先看代码：按钮代码：

　　程序代码：

　　按钮代码中加了两个事件，并通过事件调用相应的Javascript函数，以完成相应的功能，另外这里给按钮取了一个名称“lsdate”，以便程序中使用。对于要在程序中使用的元素，给它取一个合适的名称是一种好习惯，用网页制作工具软件的朋友，当然也可采用软件自动生成的元素名称，但为了便于记忆，还是自己取一个比较好。程序基本上与例二类似，但已把获得日期的代码定义为一个函数了，你看创建函数就是如此简单。那对花括号就是圈定函数的范围的。另外这里也不能再用write方法了，而是直接给按钮的“value”属性赋值，这里的document.all很重要，它的意思是文档的所有元素，也就是说它包含了当前网页的所有元素。它是以数组的形式保存元素的属性的，所以我们可以用document.all["元素名"].属性名="属性值"来动态改变元素的属性。用这条语句，可以做出许许多多动态网页效果，如：动态变换图片、动态改变文本的背景、动态改变网页的背景、动态改变图片的大小、动态改变文字的大小各颜色等等。你简直可以动态控制所有网页元素。这是不是一条神通广大的语句，应该说是Javascript神通广大！

巧用表单单选框

　冯永曜　　黄山村夫 

　　在网页的表单中使用单选框与用户进行交互是十分常见的方法，若是给每个选项再配一段选项的内容介绍，使用户在选择的时候做到心中有数，不是效果更好吗？若是每个选项的边上都写上一段说明文字，那就使页面太乱了，使用户不明白你是在作介绍还是在做表单。我们要做的是这样一种效果，在单选框的边上适当地划一块出来显示选项的介绍，随着用户选择不同的选项动态地更换内容，下面的单选框就具有这种效果，请看效果图。

　　图1

　　图2

　　在上面的表单中用了三个单选框组成一个“景点选择单元”，另用一个单行文本框用来显示景点简介，另外用一个按钮链接到已选择景点的相应网页，用HTML是无法实现这种动态效果的。用Javascript做起来并不难，所增加的代码也不多。表单的代码如下：

 黄山风景区 

 黟县古民居

 道教圣地齐云山

景点简介 

　　这个表单的代码与普通表单稍有差别：

　　1、三个单选框的value参数值都是一个网页的地址，这是为了按下“显示相应网页”能实现显示相应网页的效果而设置的；

　　2、单选框都加了一个onclick事件来调用“showjj”函数来实现在文本框中显示相应的景点简介效果；

　　3、在按钮中加了一个onclick事件来调用showpage函数以实现按下按钮后能显示已选择的景点对应的网页。那么这两个函数是如何实现这种效果的呢？请看下面的程序代码，为了你看起来方便，把程序的解释写在相应代码的边上：

　　本文例子的制方法如下：

　　1、按文中介绍的方法做好表单；

　　2、把 Javascript程序复制在网页源代码的与之间就一切OK了。

　　若你所需要的单选框数不是三个，只要在switch语句多加几个"case"就行了，其它无需改动，上面程序代码中双斜杠（//）后是注释，不是程序所必须的，实际应用时可删去。再次提醒一下，程序中要用到的网页元素名称（如本例中的“jdxzform”、“jdjj”等）大小写一定要一致，这是初学者最易犯的错误。

网页电子时钟揭密

　冯永曜　　黄山村夫 

　　在网页做一个小小电子时钟，给你的网页增加一点新意。本文介绍的电子时钟是可由用户控制的，若你喜欢它，就把它打开，若不喜欢它，可随时将它关闭。你可试试下面的例子。

　　图1 显示时间

　　图2 关闭时间显示

　　实际上，这种动态效果，用Javascript来做，也用不了几行代码。编程思路：用一个时间函数不断地刷新单行文本框中的时间。然后用一个单选框来调用显示时间的程序，再用一个单选框来取消时间函数。我们知道Javascript的Date对象中不仅可获得当前日期。而且可以获得当前时间，关键的问题是如何把表示时间的数值分离出来，方法有多种，下面分别介绍。

　　方法一：这种方法比较传统，但程序比较繁（不推荐）。程序代码如下：

　　在这段程序中，timestr=(H<10)?("0"+H):H;语句是if语句的缩写形式，它与if (H<10) timestr="0"+H else timestr=H;语句的作用完全相同。另外“+=”运算符的作用是：把两个操作数相加再把结果赋给左操作数，如：timestr+=":";与“timestr=timestr+":"”语句完全等效。

　　方法二、这种方法比上面的方法简单多了。程序代码如下：

　　在这段程序中，使用日期对象的toLocaleString()方法，把日期转换在字符串形式，便于后面的操作；字符串对象的indexOf()方法的作用是找出给定字符在当前字符串的位置；字符串对象的substring(pos1,pos2)方法的作用是取得字符串的子串，pos1和pos2 分别是子中的起始位置和结束位置。

　　方法三、这种方法所用代码最少，程序代码如下：

　　本方法的巧妙之处是采用了字符对象的分割字符串方法（split()），它的用法格式为：string1.split(string2)

　　其作用是：将字符串string1按照string2进行分割，返回一个数组，分割后的内容按顺序放在数组中。在本方法中，就是把日期字符串按空格（" "）分割，这样分割后，时间字符串正好在数组的第四个下标变量中。由于该数组是从0开始起算的，所以把timestr.split(" ")[3];赋给文本框的value参数，若你感到这讲得太专业了，你直接把程序复制就行了。

　　表单的代码如下：

显示时间 

关闭时间显示

　　本文电子时钟的制作方法：

　　1、用表单按文中介绍的方法制作一个时钟样式，发挥你的创意，把它做得漂亮一点，如可加上背景图片；

　　2、把程序复制在网页源代码的与之间，大功告成。

　　本文列举三种方法的目的是想说明，实现同样的效果，方法是多样的，一种好的方法，将大减少代码的数量，是省时省力的好事，所以我们要灵活应用我们所掌握的知识。

用Javascript制作跳动的文字

冯永曜　　黄山村夫 　

　　一段文字，每个字都在不停地变换着颜色，不停地改变大小且不停地变换位置，像一个个活泼可爱的小精灵。若是在网页上放上具有这种效果的一段文字，会使整个页面充满生气。当然，用动画做这种效果是不成问题的，但用Javascript来做要瘦小的多。下图是抓取的跳动文字瞬间图：

　　图1

　　制作方法：

　　1、先插入一个1*n表格，这里的n就是要跳动的文字数，把表格的高度定义为70px，实际上表格高度的设定原则是要大于最大的跳动文字。否则在文字跳动时，整个页面都在抖动。然后把文字写入表格中，每个单元格写一个字，由于要在程序中对每个字的属性进行操作，所以还要用标记把字括起来，并给它取一个名字（在本例中是a1、a2、a3......a6），没有名字，程序无法操作。本例的文字部分代码如下：

赛

迪

互

动

学

校

　　2、在与之间插入下面这段程序。程序思路：用Javascript的数学对象中的random()方法，产生一个0-1之间的随机数，并用这个随机数通过运算，获得一个在一定范围内的随机数，用这个数作为文字的颜色、大小的属性值，再用一个定时函数不断地刷新，从而获得预期效果。下面是程序源代码：

　　程序中的Math.random()的作用是产生一个0-1之间的随机数，那么用Math.random()*N，就可获得0-N之间的随机浮点数；Math.floor的作用是对括号内的数取一个比它小的最大整数，通过Math.floor (Math.random()*N组合，可以获得0-（N-1）之间的随机数，在本例中通过Math.floor(Math.random()*24，获得一个0-23之间的随机整数，Math.floor(Math.random()*256)可获得一个0-255之间的随机整数。这段程序比较简单，不再多作解释了。注：本例中各文字的颜色是通过改变三种颜色数值（c1、c2、c3）的顺序来达到每个文字产生随机颜色。当然也可以仿照本例中第一个文字那样用随机数来产生，但要增加不少运算工作量和代码。

　　3、在标记中加入 onload="movetext()"，以便这段文字在网页载入时，就跳动起来。

　　通过本文的例子，你看用Javascript改变文字的属性多么简单，要牢记的是：在javascript中要对哪个元素操作，必须要有“名字”，也就是ID号。要产生动态效果，setTimeout(function,value)不可少。

　　另外请注意：上面的程序只能在IE中正常运行，若要在NS中正常运行，则必须改写，具体修改方法是把document.all.a1.style.改为document.layers["a1"].，其它语句仿此修改。

Javascript的推出文字效果

　冯永曜　　黄山村夫 

　一段文字由页面里逐渐向外推出，在推出的过程中，颜色也在不断地变化，速度逐渐加快，而在最后又稍作停顿，产生一种动画效果，但它不是动画，是用Javascript制作的一种动态文字效果。它实际上是用不断地将文字从小到大改变来模拟出文字由远及近的推出效果的。下页是效果图：

　　图1 变化过程图

　　图2 变化过程图 

　　这种效果还不错吧？想做一个吗？请看制作方法：

　　1、插入一个1*1的表格，输入文字，并用把它括起来，再给它取个名字。为了使效果更好一点，在本例中还加载了一个CSS的“shadow”滤镜，使文字产生阴影的效果。本例文字部分的源代码如下：

黄山村夫站

http://fym888.go.163.com

　　2、在与之间加入下面这段程序，源代码如下：

　　这个程序由于考虑了适应IE和NS两种浏览器，所以程序代码增加了不少。在本例中是通过不同的浏览器支持不同的对象来检测浏览器的。如：IE浏览器支持document.all而不支持document.layers，所以如果浏览器支持document.all那么它就是IE系列的浏览器（当然版本必须在3.0以上），反之亦然。

　　程序的主体部分是改变文本的属性，方法比较简单，但要注意：在有多行文本时，对象的名称不要搞乱了。程序中设置了一个记数器（“i”），当定时函数每刷新一次，记数器加1，而文字大小、颜色等属性值又是通过与计数器值（“i”）的运算得出的，所以在刷新时将会发生改变，当然不能无地大下去，否则很快就一个页面也放不下一个字了，在本例中计数器最大计数是“8”，一旦达到就使它回归到“1”，从而使文字从小变到大，达到一定时候，就又从头开始，就是这条语句“if (i>8)i=1;else i++;”所起的作用。

　　为了使文字在变化过程中产生一种由慢变快的效果，从而使由远及近的效果更明显一些，对定时器的时间值也进行了动态设置，这条语句“if (i<9) t1=setTimeout("movetext()",1000/(i*0.5));”就是起这种作用的。那么当文字变到最大时又多停留一下就是这条语句“else t1=setTimeout("movetext()",2000);”的作用了。你若想使最大的文字停留更长时间，只要加大定时器的毫秒数就行了，本例中是2000毫秒，也就是2秒。

　冯永曜　　黄山村夫 

　　下面的这种效果够奇妙吧（由于是抓取的过程图，无法看出其动态效果）！这是一种三维文字环绕效果，环绕文字在旋转的过程中，不但文字的大小在不断地改变，以增强立体感，更为独特的是它能从被环绕的文字（或图片）后面绕过去，这才是体现三维立体的关键所在。而且文字的环绕路径也不是简单的圆形，而是一种复杂的渐变轨迹，这么复杂的动态效果，就是用Flash来做也还要费不少脑筋，不信你试试。你可能认为这种动态效果的Javascript的程序很长吧，其实不然。不仅程序不长，制作也不复杂。

　　制作方法：

　　1、插入一张图片或写入一段文字，在本例中是写入一段文字，并加载了一个CSS的“shadow”滤镜以增强效果的。

　　2、接着加上下面这段程序：

Text1="欢迎您的光临"; //这是用于旋转的文字，可以改你所需要的，但最好不要太长。

Balises=""; 

Fsize=30; //文字大小变化的参照值，改变这个数值，旋转文字的相对大小交改变。

Tleft=300; //文字旋转中心距页面左边界的距离，可修改它，以使旋转中心在指定位置。

Top=140; //文字旋转中心距页面顶部边界的距离，可修改它，以使旋转中心在指定位置。

H=170; //文字旋转半径。

v=70; //文字旋转偏离水平面的控制参数，该数值越大，偏转的角度越大。

maxv=v*2;

j=0; //给计数变量赋初值。

Decal=0.5;

Tl=Text1.length;

for (x=0;xBalises+="" + Text1.charAt(x) + ""

}

document.write (Balises);

Time=setInterval("Around()",100); //启用循环定时器

Alpha=5;

IA=0.08; //调整速度，此值越大，速度越快。

function Around(){ //修改各个文字所在图层的位置、层序号、文字的大小和颜色。

Alpha -=IA;

if (j<(maxv+1)) {v--; j++}else 

if (j<(2*maxv+1)) {v++;j++} else{v--;j=1}

for (x=0;xAlpha1=Alpha+Decal*x;

Cosine=Math.cos(Alpha1);

Ob=document.all("L"+x);

Ob.style.posLeft=Tleft+H*Math.sin(Alpha1);

Ob.style.posTop=Top+v*Math.sin(Alpha1); 

Ob.style.zIndex=20*Cosine;

Ob.style.lineHeight=1;

Ob.style.fontSize=Fsize+25*Cosine;

Ob.style.color="rgb(0,"+ (137+Cosine*80) + ",0)";

}

}

　　上面这段程序，有以下几点值得注意：

　　1、setInterval("function",delaytime)循环定时函数的作用是每隔一定时间，调用一次指定的函数，这是与setTimeout("function",delaytime)（定时函数）不同的，定时函数到了指定的时间，执行一次就结束了。而循环定时函数则是每隔一定时间就调用一次指定的函数，一直不停，要使它停止的话，可设置clearInterval(timename)函数。

　　2、动态编写HTML代码，这是一种巧妙的办法，既减少你敲代码的麻烦又加快了页面的下载速度。另外这也给我们增大了创作空间，你想想，你可以随时随地编写HTML代码，那不成了动态编辑网页了吗？！但这样编写的HTML代码只能临时用，一不能保存，二要占用客户端资源。

　　3、在本例的程序临时动态编写的HTML代码中，是把每个要旋转的文字分配在一个标记，这相当于Dreamweaver3中的一个图层，这一点很要，因为图层可重叠，相互覆盖，从而可以产生一个三维空间，而它们在垂直方向的顺序是由层序号参数“zIndex”来控制的。在程序中通过“Ob.style.zIndex=20*Cosine;”语句给每个图层确定层序号，并不断地刷新，从而使得文字在旋转的过程中其层序号也在改变，使得文字时而在页面文字的后面，时而在页面文字的前面，产生一种逼真的三维效果。

　　4、本文的程序只能在IE环境中下常运行，若要在NS环境下运行，可参考《推出文字效果制作》一文中介绍的方法对上述程序稍作改动。

用Javascript制作鼠标移动跟随

　冯永曜　　黄山村夫 

　　我们常在一些网站中看到，鼠标在网页上移到时，有一行文字、一张小图片或一个小动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟鼠标不放。你知道这种效果是怎么做出来的吗？你可能感到比较复杂。其实它是用Javascript编一段小程序来实现的，且程序也不长，也比较好理解。下面让我们来揭下它的面纱看看。

　　程序思路：图层可以用绝对坐标来确定其在页面中的位置，那么我们把图片、动画或文字放到图层上，再想办法动态获取鼠标的当前位置，再把图层移到鼠标的当前位置，那图层上的内容（图片、动画或文字）不也就移到当前鼠标的位置了吗？这样就达到了图片、动画或文字随鼠移动的目的了。

　　一、一个简单的图片、动画或文字随鼠标移动的例子

　　制作方法：

　　1、在 Dreamweaver3中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图片。

　　2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可把代码复制到标记的后面：

图、文跟鼠标试验 ，这里的图片和文字可换成你所需要的。

　　3、在与之间加上这样一段程序：

　　只要这几行代码就能使图片或文字跟着鼠标跑，有点出乎意料吧！事实就是这么简单。当然，这是最简单的一种，你可能看到的有些网页上的效果在移动的过程比这要复杂一些，但都是在这个基础上增加一些移动的变化过程而已。

　　4、当然要使真正的效果出现，还得在标记中加上触发事件调用程序，使程序动作起来。在标记中加上代码：onload="move()" onmousemove="canmove()"，前一个函数的作用是在网页加载时就调用“move()”程序，使其开始刷新图层的位置坐标；后一个事件的作用是，一旦在页面上移动鼠标，就重新计算它的位置坐标。

　　二、稍复杂一点的效果

　　在上例的基础上稍作一些改动，可获得更好的效果，如使“欢迎光临！”这几个字不仅是分开移动，在移到新位置后，还不停地左右移动，似乎在列队欢迎。要实现移动过程的变化，就要把每个文字分开，一个图层放一个字（或一张图片），然后分开移动到新的位置。所以为了方便，用数组来存放图层的位置坐标。另外，由于图层较多，插入图层比较麻烦，也会使代码大增加，因此采用了动态编写图层代码的办法。制作方法如下：

　　1、在与之间插入下面这段程序：

　　2、在标记的后面加上这段程序：

　　这段程序的作用是动态自动编写存放移动文字图层的HTML代码，并把相应的文字写在上面。

　　3、在标记中加上代码：onload="move()" onmousemove="canmove()"。

　　这样在浏览器中，“欢迎光临！”这几个字就会紧跟鼠标移动，到达新位置后还会左右移动。我想现在不会再感到这种效果有什么神秘了吧？！

Javascript制作水中倒影

冯永曜　　黄山村夫 　

　用 Java 的applet控件可以做出非常漂亮的水中倒影效果，这已是众所周知的事了。但是那样做出来的效果在运行时需要带上一个Java applet控件，所以体积显得比较大。而本文介绍的这种用Javascrpit做出来的水中倒影效果，却只要增加很少的几行代码就完成了，虽然效果略差一点，但看上去还是挺逼真的，你看下面这种波光粼粼的水中倒影效果，当然这里是抓取的图片，实际效果中的水波是动的。

　　本文例子制作思路：先用一个CSS的“FlipV”滤镜把图象垂直翻转产生倒影，再用一个CSS的“Wave”滤镜产生波纹，然后用一个CSS的“Alpha”滤镜使图象半透明，最后用一段Javscript程序动态不断地改变CSS的“Wave”滤镜的“freq”（波纹频率）和“strength”（波纹的振幅）参数，从而模拟出水波粼粼的效果。

　　制作方法：

　　1、插入两张相同的图片，位置是一上一下，上面一张作原景，ID号为“img1”.下面一张作倒影用，其ID号为“img2”。

　　2、在作倒影的图片上加载CSS的FlipV（垂直翻转滤镜）、Wave（波纹滤镜）、Alpha（透明度控制）滤镜，各滤镜的参数如下面的源代码所示。完成设置后的图片标记源代码如下：

。改变alpha滤镜中的opacity参数的值，可以改变图象的透明度，该值越大，图象越不透明，也就是图象越清晰，最大值是100（完全不透明），最小值是0，完全透明，那图象可就一点也看不见了。

　　3、在网页源代码的与之间加上如下这样一段Javascript程序：

　　这段程序没有什么复杂的地方，所以不多解释了。若想使波纹的变化加快，减少setTimeout函数中的定时毫秒数；若要使波纹的变化加大，只要减少step的初值就行了；加大K的允许最大值（在本例中是15）也能起到增大波纹变化范围的效果。

　　4、在标记中加上“onload="movesy()"”事件，以使页面载入时就显示倒影效果。

　　应用本例效果要注意的两点：一是在设置Wave滤镜参数时，不要把add 参数设置为“true”；二是作倒影图片的ID号必须与Javascript程序中调用时的对象名称一致。

用Javascript制作推拉门式菜单

　冯永曜　　黄山村夫 

　　这里介绍的推拉门式菜单，故名思义，其效果就象推拉门一样，可以随意拉出推进，非常节省页面空间，你可用鼠标点击主菜单条上的任意一个主菜单项，都会缓缓地拉出一个子菜单框来，当你再次点击主菜单项时，子菜单框又缓缓地推进去，是不是很方便？（见下面的效果图）这种效果当然可以在Dreamweaver中用图层再配合时线功能来做，但那样代码比较多，我这里用自编的javascript程序，则代码要少多了。下面介绍制作方法。

　　制作思路：

　　把主菜单和各主菜单对应的子菜单分别做在不同的图层上，并把主菜单的ID号定义为“div0”，其它子菜单的ID号分别定义为“div1”、“div2”、“div3”......。子菜单的“Z_index”参数值要大于主菜单，以免主菜单把子菜单遮盖。再把所有子菜单的顶部与相应主菜单的底部对齐后，再把子菜单图层的“left”参数改为负值，使其在显示屏幕外，平时是看不见的。再用一段Javascript程序使其能动态地改变子菜单所在图层的“left”参数把它拉出来和送回原处。然后在主菜单的超级链接上加一个“onclick”事件来控制其对应的子菜单是需要拉出来还是送回去。

　　制作方法：

　　1、在dreamweaver中，按上面讲的思路用图层做好主菜单的子菜单，菜单要放什么内容及菜单项的多少可根据实际需要增减。不是使用Dreamweaver的网友可把下面的代码复制到网页源代码的和之间：

主菜单1

主菜单2

主菜单3

主菜单4

主菜单5

 子菜单1

子菜单2

子菜单3

子菜单4

子菜单5

　　由于篇幅所限，这里只给出主菜单和第一个主菜单项所对应的子菜单图层代码。你可在主菜单的图层（“div0”）上通过增加（或减少）表格的行来增加（或减少）主菜单项；通过复制子菜单图层来增加子菜单，不过复制的子菜单图层中的ID号和“z-index”值要作相应更改。

　　2、在菜单代码的后面加入下面这段Javascript程序：

　　3、在需要子菜单的主菜单项的超级链接中加上事件代码：onclick=" canout(n) ;moveout(n)"；要注意，括号中的n必须与其所对应的子菜单图层的ID号后面的数字相同。

　　在应用本文提供的程序时，各图层的ID号必须采用上面制作思路中讲的方法标识，不能采用Dreamweaver 默认的ID（Layer1、layer2等）；另外本文程序只能在IE中正常运行，在NS中要正常运行必须对程序作少量改动。

用Javscript制作图片变换特效

　冯永曜　　黄山村夫 

　　本文介绍的这种动态切换图片效果，具有二十三种切换样式，并不是用动画软件制作的动画，而是用Javascript制作出来的效果，是不是有点出乎你的意料。更值得一看的是它只用了廖廖几行程序代码，且变换的图片数量可以随意增加却不增加程序代码。你感到奇怪吗？继续往下看你就明白了。

　　制作思路：

　　给插入的图片加上一个ID（img1)号，以便 Javascript程序对其操作，再给图片加载一个CSS的动态滤镜revealTrans，然后用一小段Javascript程序定时不断地改变revealTrans滤镜的Transition参数值以获得不断地更换切换样式，同时通过程序不断地改变图像标记的“src”（图片的地址）参数值，以获得更换图片的效果。

　　制作方法：

　　1、在网页中插入一张图片，给图片加上ID号为：img1，若改变ID号，那么在程序中也要作相应改变。再给图片加载一个revealTrans滤镜，完成后的图像标记的完整代码如下：

　　滤镜中的Duration是控制切换时间（以秒计）的，本例设置的是1.5秒，若想使切换过程慢一些，可加大Duration参数的值。

　　2、在网页源代码的与之间插入下面这段Javascript程序代码：

　　若要让图片在切换后停留的时间长一点，可加大定时函数setTimeout中的定时数值（以毫秒计）。

　　3、在网页源代码的标记中加上onload="start()"事件，以使得在网页载入时就显示动态切换效果。

　　至此，制作结束。是不是一点都不难？！但在实际制作时应注意以下几点：

　　1、所有图片的文件名和文件格式要统一，用序号区分，如本例所用图片的文件名（含相对路径）为：、、；

　　2、所有图片的大小最好要一致。若图片的大小不一致，虽不影响程序的运行，但在显示时，均以插入在网页上的那张图片的大小来显示，那么，大的图片将缩小显示，小的图片放大显示，影响效果。

　　3、在修改定时器函数setTimeout中的定时时间或修改CSS的revealTrans的切换时间Duration参数的值时，要使前者的时间大于后者的时间，否则，切换过程还没有完成就又开始下一过程了，从而使人无法看清楚图片。另外要注意，定时器是以毫秒为单位计时，而滤镜是以秒为单位计时。

用Javascript制作会计算的表单

　冯永曜　　黄山村夫 

　　我们在制作定购单时，往往要计算客户定购物品的货款，HTML并没有提供这种在线计算的功能，但我们用Javascript程序可以实现这种在线汇总计算的功能。当然一个完整的定货单可能涉及许多表单标记，如何获取各表单标记的value值是解决问题的关键。本例的方法将告诉你如何去获得各表单元素的value值，并加以计算。你看下面这张定货单，它虽涉及多种表单元素（如单选框、复选框、单行文本框等等），但你可以随意选取物品，只要一按“计算货款”按钮，立即计算好全部货款，分毫不差。满意吧！

　　制作方法： 

　　1、制作一个定货单， 用表单元素制作定货单在这里不细讲了，若你不会做的话，请去看看《HTML高级进阶技巧》专题的有关文章。但在制作这种要用程序进行计算的表单有两点要注意：

　　1）所有表单元素都要给取一个确切的名字，也就是要设置好“name”参数的值，以便在程序中引用；

　　2）对于象单选框、复选框这样的供用户选择的表单元素，要把具体的值定义到它的value参数上，否则，程序在计算时无法获得实际数值，写在它边上的那个数值是给用户看，程序是无法获取的，这一点切勿忽视，否则计算结果不正确。例如：本例中两种电脑单价（5000元和7000元）的两个单选框的源代码如下：

单价： 5000元 

7000元

　　看到了吧，除了在单选框的边上要写上单价的数值，还在单选框标记中设置好value的相应数值。 

　　2、在表单的后面插入下面这段程序：

　　该程序不复杂，关键的要注意以下几点：

　　1）对于所有表单元素的value参数值，它们都是字符形式，要参于计算，必须先用parseInt()函数把它转换成数值形式；

　　2）对于单选框，要先找出用户选中的是那一个单选框，然后再取其value值进行计算；

　　3）对于复选框，要逐个判断是否被选中，如果被选中，则计算，否则不计算。

　　4）对于单行文本框，一般是要求用户输入的，所以其值可直接转换后进行计算。 

　　3、在“开始计算”按钮中加上一个事件：onclick="jshk()"来调用程序进行计算。 

　　由于定购单的样式千变万化，所以本文的程序直接引用的可能性是很少，但不管表单如何变化，万变不离其宗，其获取表单元素value参数值的方法是相同的，所以本文介绍的方法是很实用的。

用Javascript制作复选框

冯永曜　　黄山村夫 　

　　我们在制作调查表时，往往要用户的选择复选框的数量，如象本例中要求用户在九个网站中选择三个（见下图）认为最好的网站，这就要求用户选择的网站数不能大于3个，当然可以在后台通过程序来控制，但那样又慢又繁，用Javascript程序在用户端直接控制既快速又方便，在本例的效果中，一旦选择的网站数超过3个，将立即弹出一个提示窗口，告诉你选择的网站数不能超过3个。

　　本例效果的制作方法如下： 

　　1、制作一个含有复选框的表单。所有复选框的“name”（名称）参数要统一，以序号区分，以便程序调用。如本例的复选框名称为：c1、c2、c3......c9。 

　　2、把下面这段程序插在与之间，这段程序代码如下：

　　在引用本文程序制作表单是要注意的是各复选框的名称，程序默认的是：c1、c2、c3......c9。如果改用其它名称时，要把这句程序：var checkboxname = "c"中的“c”换成你的实际名称前缀，但后面的序号一定要从1开始且要连续，否则程序将要修改。 

　　3、在每一个复选框的标记中加上一个：onclick="mycheck(this)"来调用这段Javascript程序，使其每次点击复选框时都用程序检测一遍已被选择的复选框数量并判断是否超过的数量。完成后的复选框代码如下（了限于篇幅，仅取三个作示范）：

信息 

咨询 

投资 

　　至此制作完成，在浏览器中就可以看到预期的效果了。若是我们要求用户必须选择三个网站才能提交，那又怎么办？其实很简单，在程序中再增加下面这个检测函数：cnasubmit()，代码如下：

function cansubmit(){ //选择网站数量是否符合要求检测函数。

if (Numalert("你只选了"+Num+"个网站，还需再选"+(MaxSelected-Num)+"个网站才能提交，谢谢合作！");

}

　　然后在提交选单按钮的标记中加上一个事件：onclick="cnasubmit()"来调用检测程序，若不满足要求的选择数量，则弹出一个提示框，并在提示框中显示已选择的网站数和还增加的选择网站数，你看，这样是不是更贴近用户一些。

用Javascript制作旋转导航菜单

　冯永曜　　黄山村夫 

　　你见过这样的导航菜单吗？导航菜单围绕着网站Logo不停地旋转，而一旦你把鼠标移到菜单上，旋转立即停止，在显示网站logo的地方显示出这个菜单链接的内容简介，点击链接将链接到指定的网页。一旦你的鼠标离开菜单，导航菜单又继续不停地旋转。你看这种导航菜单是不是既吸引人又贴近用户。本文例子如下图所示。是不是想在自已的网页上也放上一个，其实制作起来也不太难。

　　制作思路：要使页面的内容旋转起来，用图层和Javascript程序是肯定的了，要使图层的运动轨迹是一个圆，这要用到圆的参数方程，这是一个数学问题，不懂也没关系，程序我已写好，你只要复制就行了。关于鼠标指到某个链接就显示该链接的内容简介，这是图层的visible属性控制，用Dreamweaver的网友，用Behaviors很容易实现，不过在本文中我自编了一个小程序来控制图层的visible属性，以便不用Dreamweaver的网友也能很容易地做出本文的效果。 

　　制作方法： 

　　1、把下面这段程序插入到网页源代码的与之间：

//程序开始

　　引用本程序时，注意以下几点：

　　1）可通过修改旋转半径来调整旋转范围的大小；

　　2）修改旋转中心的X、Y坐标，可以把旋转效果移到页面的任何地方。 

　　2、在网页源代码的与之间插入下面的代码以制作导航菜单等图层：

链接 1

链接 2

链接 3

链接 4

黄山村夫站
http://fym888.go.163.com

链接1内容简介 

链接2内容简介 

链接3内容简介 

链接4内容简介

/* 下面是准备一些变量的初值，为事件调用程序作基础*/

var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);

var rotatediv1 = (isNS) ? document.rotatediv1 : document.all.rotatediv1.style;

var rotatediv2 = (isNS) ? document.rotatediv2 : document.all.rotatediv2.style;

var rotatediv3 = (isNS) ? document.rotatediv3 : document.all.rotatediv3.style;

var rotatediv4 = (isNS) ? document.rotatediv4 : document.all.rotatediv4.style;

var nrjj1 = (isNS) ? document.nrjj1 : document.all.nrjj1.style;

var nrjj2 = (isNS) ? document.nrjj2 : document.all.nrjj2.style;

var nrjj3 = (isNS) ? document.nrjj3 : document.all.nrjj3.style;

var nrjj4 = (isNS) ? document.nrjj4 : document.all.nrjj4.style;

initobj();

　　上面的代码看起来有点复杂，你若对HTML不熟悉的话，可以不要管它，只要把其中的文本、图片和超级链接换成你所需要的就行了。 

　　至此，制作结束，一个美观实用的旋转导航菜单就做好了。在实际制作过程中，由菜单内容简介的图层是设置成隐藏的，若是用DW或FP的网友可能无法编辑，解决的办法是：

　　1）在源代码中编辑；

　　2）把CSS样式表中的这段代码visibility:hidden;删除，这样那些图层就可看见了，但是，是重叠在一起的，可用鼠标把它们拖开，把内容写好后，再把它们拖回原处。使用DW的网友可用DW的图层面板操作就方便多了。