JavaScript网页特效实例教程

暑期特刊

谢臻

　　一、Javascript的基础知识

　　1.Javascript与JAVA的区别

　　Javascript是Netscape公司和Sun Microsystem公司共同开发研制的语言。Javascript与Java并不是相同的概念，初学者尤其应当注意。，参见下表：

　　2.Javascript的优点

　　(1)制作速度快，生成性良好

　　Javascript可以直接在HTML源代码内使用，因此可以直接使用任意的文本编辑软件制作，同时，因为省略编译过程，制作速度快。

　　(2)对运行环境没有特别要求

　　Javascript可直接在HTML源代码内识别与传送，因此在Unix、Linuyx、Windows等环境下均能运行通畅。

　　(3)学习简便

　　Java的对象繁多，文法复杂，学习起来比较麻烦。与之相比，JavaScript减少了很多对象，文法也简单了许多，因此即使复杂的程序也可以轻易编制出来。

　　3.Javascript的缺点

　　(1)显示源代码

　　因为HTML源代码内包含JavaScript，所以无法防止其他用户复制源代码并再次使用，这就以为着丧失了对程序的保密性。基于这一点，我们可以很轻松的将自己需要的效果进行修改并为自己所用。

　　(2)对象和方法的限制

　　Javascript比起Java能够编写的程序较少。这是因为其对象和方法都被进行了限制。

　　4.Javascript的标记

　　在前面我们已经讲到Javascript可以插入到HTML中进行制作，那我们在最后的代码中怎样区别HTML代码与Javascript代码呢？其实Javascript是必须依据一定的格式写入HTML的，格式如下：

　　＜script Language="script种类" src=文件名＞

　　javascript代码

　　＜/script＞

　　5.变量

　　变量(Variable)是在程序设计中不可缺少的重要部分，指的是一种可以容纳数据的被命名的存储单元。程序执行期间可以对其进行修改。

　　可以把变量理解为一间房子，房子的名称是不会变的，但是其中有多少人却是可以不断变化的。

　　声明变量格式：

　　Var 变量名

　　或者 Var 变量名，变量名，变量名，……

　　与其他的程序语言不同，在Javascript中不需要声明数据类型，因为Javascript可以自动识别所输入的数字或者符号。那么在JavaScript中包括哪些数据类型呢？

　　6.变量名的规则

　　变量名为文字时可以使用英文、数字或者下划线，但不能使用其他特殊符号。

　　在Javascript中预先设置好的符号或特殊词汇不能做为变量名称。

　　可以杂字符后使用数字。

　　变量名的第一个字符必须是英文字母而不能使用特殊符号或者数字。

　　不能使用中文。

　　7.Javascript的运算符

　　在Javascript中包含算术运算符、连接运算符、关系运算符、逻辑运算符、条件运算符、位运算符、递增和递减运算符。它们的作用、区别、格式我们将在下面的表格中详细描述：

　　1(1)算术运算符

　　(2)连接运算符　

　　(3)关系运算符　

　　关系运算符根据表达式双方的大小比较结果来返回值，若为真，返回“Ture”，若为假，返回”False“。

　　　(4)逻辑运算符

　　逻辑运算符的结果返回“真”或者“假”，因此具有“Ture”和“False”两个值。根据逻辑运算符左右两侧内容，按照||(OR)，&&(AND),^(XOR)的逻辑关系，返回Ture与False两个不同的值。!(NOT)在Ture的情况下更改为False，在False的情况下更改为Ture。

　　其实使用Ture与False是为了让我们理解方便，在程序内部实际按照0与1处理，Ture时为1，False时为0。

　　(5)条件运算符

　　根据设置的条件将两个值的一个作为运算结果返回。

　　(6)位运算符

　　位是最小的数据单位，包括值0和值1，根据运算符号左右两侧的位数，结合OR、AND和XOR，可以得到如下的逻辑值：

　　!(NOT)运算在值为0时，将值更换为1；在值为1时将值跟换为0，在逻辑运算中，AND使用两次“|”符号，OR应使用两次“&”符号，而在位运算中都只需要使用1次。

　　(7)递增和递减运算符

　　为了方便的运行于1为单位的递增或者递减运算，可使用递增和递减运算符。

　　++A和A ++的区别是：++A是在值增加后再以1进行递增，A++是在返回值后再以1进行递增。

　　8.循环语句

　　Javascript的循环语句有for语句、While语句、do while语句等，我们只重点介绍for语句与while语句。

　　(1)For语句

　　For语句通过设置初始值、最终值、增加方式来完成循环，在有规律的增长的情况下我们一般都使用For语句。

　　格式：for(初始值; 最终值; 增加方式)

　　　　　　　　{

　　　　　　　　语句

　　　　　　　　}

　　程序从初始值开始，以增加方式为单位增加，直到得到最终值，每增加一次的同时运行一次语句。　　　

　　实例：Var total=0,i

　　　　　　 for(i=1;i＜=100;i++)

　　　　　　 {

　　　　　　 total=total+i

　　　　　　 }

　　在这个运算中，i的数值为1—100，每次增加1，同时运算total=total+1，则运算完成后total的值为5050。　　　

　　(2)While语句

　　格式：While(条件式)

　　　　　　　　 {

　　　　　　　　　　　 语句

　　　　　　　　 }

　　对于While语句，在满足条件式中的条件时，执行下面的语句，如果不满足则跳过while中的语句直接执行后面的语句，所以在最初的条件不满足时，while不起作用。

　　实例：Var i=0,total=0

　　　　　　　 While(i＜100)

　　　　　　　　　 {

　　　　　　　　　　 i++

　　　　　　　　　　 total=total+i

　　　　　　　　　 }

　　在声明变量的时候变量i=0，0＜100满足条件，因此进入循环，每次i都加1，?直到i不小于100，则最后total的值为5050。

　　9.浏览器对象结构

　　浏览器的对象具有树形结构，浏览器对象拥有很多的属性、方法和事件，具体结构如下表所示：

　　二、Javascript网站特效精彩实例

　　实例一　前进后退按钮

　　1.效果描述

　　本实例实现如同浏览器上按钮的前进与后退的功能，点击前进可以进入下一个页面，点击后退按钮可以回到上一页面。

　　2.重点函数、对象、方法、属性

　　(1)Histoy对象

　　Histoy对象是利用浏览器暂时保存浏览过的URL网页，因此可以利用向后(Back)，向前(Forward)按钮进行浏览，浏览器的向后、向前按钮可在浏览器内器窗口内制作。

　　(2)History对象的方法

　　在没有上一个页面时，运行back()方法并不会发生错误，但浏览器仍显示当前画面。即back()、forward90、go()方法即使不能正常运行也不会出错，只会显示当前页面。

　　实例代码及注释：

　　在要前进的地方加上 onClick=history.go(1)，后退的地方加上 onClick=history.go(-1)

　　如本页的内容为:

　　＜input type="submit" name="Submit" value="前进" onClick=history.go(1)＞

　　＜input type="submit" name="Submit2" value="后退" onClick=history.go(-1)＞

　　实例二　离开启动收藏夹

　　1.效果描述

　　在网络世界中，如何提高自己网站的访问率是每一个站长操心的问题，如果使用本实例，你就可以在浏览者离开你的网站时自动启动收藏夹提醒将你的网站添加到收藏夹中。

　　2.重点函数、对象、方法、属性

　　external是windows的属性之一，而AddFavorite是其最常用的方法，可以实现添加地址到收藏夹的作用，通常的格式为：

　　window.external.AddFavorite(url地址, 网站名称)

　　实例代码及注释：

　　将下面的代码放到＜body＞或＜head＞内

　　＜script language="javascript"＞

　　function bookmark(){

　　window.external.AddFavorite(location.href, document.title)

　　}

　　＜/script＞

　　在＜body＞中加上 onunload=bookmark()

　　如:＜body bgcolor=#336699 onunload=bookmark()＞

　　实例三　警告链接确认

　　1.效果描述

　　这个效果在某些内容比较重要的网页中可以得到应用。当你点击链接后将弹出一个对话框，提示你是否确认要进入链接。

　　2.重点函数、对象、方法、属性

　　(1)confirm函数

　　confirm函数也向用户传递信息并显示对话框，让用户通过选择对话框内的“确认”或“取消”进行恰当的处理。

　　格式：confirm (字符串)

　　通过confirm函数调出的对话框中，若选择“确认”键，则返回true，按下“取消”键，则返回false。

　　(2)document事件表：

　　(3)if语句

　　格式：if(条件)

　　　　语句一

　　　 else

　　　　 语句二

　　如果满足条件就执行语句一，不满足就执行条件二，例如：

　　if (SUNG＞=60)

　　　document.write("60分以上")

　　else

　　　document.write("不及格")

　　实例代码及注释：

　　将下面的代码放到＜body＞内

　　＜script＞

　　function winconfirm(){

　　//定义函数

　　 question = confirm("你确认要到“广州视窗”吗？")

　　//使用comfirm函数，设置提示窗口内容

　　 if (question != "0"){

　　 window.open("http://www.gznet.com")

　　 }

　　//判断返回值

　　}

　　＜/script＞

　　在连接的地方加上：

　　onClick=winconfirm(); 如 ＜a href=www.pckings.net onClick=winconfirm()＞pcking的个人网站＜/a＞

　　实例四　简单的轮显效果

　　1.效果描述

　　图片随机显示是一个应用非常广泛的技巧。比如随机banner的显示，当你进入一个网站时它的banner总是不同的，或者总有内容不同的提示(tips)，大家在网上浏览时会经常发现这样的例子。使用这种技术，不但能在一定的空间里放入更多的内容，还可以给人一种经常更新的假象喔。

　　2.重点函数、对象、方法、属性

　　(1)数组对象

　　格式：数组名=new Array(序号)\

　　序号中决定数组中可设置值的最大长度。注意：数组的序号从0开始。

　　例如,我们可以如下声明数组，并且设置各个位置的值：

　　sung_array=new Array(4)

　　sung_araay[0]="pcking"

　　sung_araay[1]="小旭旭"

　　sung_araay[2]="tiger"

　　sung_araay[3]="darkvn"

　　(2)Math对象

　　Math对象提供了各种属性和方法，以处理数学中使用的三角函数、圆周率，指数、绝对值等。Math对象不使用new运算符而使用如下的格式：

　　格式：

　　Math.方法()

　　Math.方法(参数…)

　　Math.属性

　　实例：document.write(Math.min(10,20))

　　Math对象的方法：

　　实例代码及注释：

　　＜script language=javascript＞

　　var image=new Array(3)

　　//声明数组

　　image.length=3

　　//数组最大长度为3

　　image[1]="url1"

　　image[2]="url2"

　　image[3]="url3"

　　//声明数组中的各个位置的值

　　id=Math.round(Math.random()*2)+1

　　//使用随机数确定id

　　imageurl=image[id]

　　//将数组中相对应位置的值赋予变量

　　document.write("＜a href="+imageurl+"＞"+"＜img src="+id+".gif＞")

　　//在页面中显示相应内容

　　＜/script＞

　　说明： 注意将图片的名称更改为1.gif、2.gif…..，并且放置在同一个目录下，注意链接时使用相对路径。

　　实例五　鼠标控制的导航

　　1.效果描述

　　在打开页面后，可以在窗口左侧看到导航条的表格的一条边，将鼠标放到上面，你就会看到导航条从屏幕外面滑动到了窗口以内，当其内容完全显示后，就会静止。如果你的鼠标移出导航条的范围，导航条将自动的滑动到屏幕以外。

　　2.重点函数、对象、方法、属性

　　(1)变量

　　格式：var 变量名

　　是指在设计程序是时候，可以储存数据的单元，在程序运行的过程中可以对其进行修改。

　　注意：常数一经声明不再改变，而变量随时都可以改变。

　　例如：

　　var pcking

　　var xz111

　　var pcking=100

　　注意在javascript中的变量命名规则：

　　变量名称可以使用英文、数字、下划线，但是不能使用特殊符号。

　　javascript使用的特殊词汇不能做变量名。

　　在字符后可以加上数字(0-9)。

　　变量的第一个字符必须是英文，而不能是特殊符号和数字。

　　不能使用中文。

　　(2)for语句

　　格式：for(起始值：最终值；增加方式)

　　语句

　　语句从起始值开始以增加方式为单位增加，直到达到最终值。

　　例如：

　　for(i=1;i＜=100;i++)

　　total=total+I

　　则最后的结果为total=5050

　　(3)setinterval方法

　　属于window对象方法，用于反复执行指定的时间，即每隔一个设置的时间段就执行一次命令。

　　格式：

　　window对象.setinterval(函数，周期)

　　周期设置的是毫秒(1/1000秒)比如输入1000则时间间隔为1秒。

　　例如：

　　time_id=setinterval(“time_out()”,1000)

　　(4)document对象的方法：

　　实例代码及注释：　

　　第一步：将下面的代码写入到htm页面 ＜head＞＜/head＞标签之间。

　　＜style＞

　　＜!--

　　#slidemenubar, #slidemenubar2{

　　position:absolute;

　　left:-155px;

　　width:160px;

　　top:170px;

　　border:1.5px solid green;

　　background-color:lightyellow;

　　layer-background-color:lightyellow;

　　font:bold 12px Verdana;

　　line-height:20px;

　　}

　　--＞

　　＜/style＞

　　//这是一个样式表，用来定制导航条及其文字的样式。使用类似于#slidemenubar的方式定义样式表，是利用标记的id属性完成的。在页面中只要有使用id=“slidemenubar”的地方都会套用我们在这里写的样式式样。而没有设置id的其他同类标记并不会套用样式。例如：

　　＜div name=layer1 id="slidemenubar"＞ ＜/div＞标记将套用到样式

　　＜div name=layer1 ＞ ＜/div＞则不会套用样式

　　这是样式表设定中常用的技巧，希望能熟练掌握并灵活使用。

　　第二步 将下面的代码写入到页面 ＜body＞＜/body＞之间

　　//使用document.write写入html代码，实际上一个div定义的层，并且规定，但 鼠标移动到层上(onMouseover)的时候，调用自定义的pull()函数，当鼠标移出层(onMouseout)的时候，调用draw()函数。

　　＜script language="JavaScript1.2"＞

　　//浏览者如果是使用的IE浏览器，我们可以使用DIV标签来定义层。注意，我们将

　　document.write('＜div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()"＞')

　　＜/script＞

　　//如果浏览者使用的是NS的浏览器，将不支持div标签，而应当使用其专用的layer标签，我们将在后面的代码中对浏览者使用何种浏览器做出判断。

　　＜layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()"＞

　　＜script language="JavaScript1.2"＞

　　//声明数组sitems，用来储存文字

　　var sitems=new Array()

　　//声明数组sitemlinks，用来储存连接

　　var sitemlinks=new Array()

　　//设置数组sitems的内容

　　sitems[0]="Home"

　　sitems[1]="Take our survey!"

　　sitems[2]="Menus And Navigation"

　　sitems[3]="Document Effects"

　　sitems[4]="Scrollers"

　　sitems[5]="Image Effects"

　　sitems[6]="Links And Buttons"

　　sitems[7]="Dynamic Clocks & Dates"

　　sitems[8]="Text Animations"

　　sitems[9]="Browser Window"

　　sitems[10]="User System Information"

　　sitems[11]="Cascading Style Sheets"

　　sitems[12]="Other"

　　//设置数组sitemslinks的内容，是sitems的连接

　　sitemlinks[0]="../test.htm"

　　sitemlinks[1]=".."

　　sitemlinks[2]="../dynamicindex1/index.html"

　　sitemlinks[3]="../dynamicindex3/index.html"

　　sitemlinks[4]="../dynamicindex2/index.html"

　　sitemlinks[5]="../dynamicindex4/index.html"

　　sitemlinks[6]="../dynamicindex5/index.html"

　　sitemlinks[7]="../dynamicindex6/index.html"

　　sitemlinks[8]="../dynamicindex10/index.html"

　　sitemlinks[9]="../dynamicindex8/index.html"

　　sitemlinks[10]="../dynamicindex9/index.html"

　　sitemlinks[11]="../dynamicindex7/index.html"

　　sitemlinks[12]="../dynamicindex11/index.html"

　　//利用sitems.length读取数组长度(即数组内数据项的个数)再利用for循环来自动将sitemslinks数组的数据对应于sitems数组的内容写入html标记

　　for (i=0;i＜=sitems.length-1;i++)

　　//利用document.write方法在页面中写入数据

　　document.write('＜a href='+sitemlinks[i]+'＞'+sitems[i]+'＜/a＞＜br＞')

　　＜/script＞

　　＜/layer＞

　　//定义一些函数

　　＜script language="JavaScript1.2"＞

　　//利用setTimeout来控制一个延时，并以这个时间为间隔来执行循环命令(其实就是导航条移动的命令，每隔这个时间段将导航条移动一段位置，由于时间的间隔很小，所以就形成动画的效果)我们可以看到目前的延时是400毫秒

　　window.onload=regenerate2

　　// document.all是页面上所有元素的集合，通过名称说索引来引用。只有IE专用，所以一般用来判断是不是IE，判断是ie就返回ture ，例如：if(document.all){是IE}

　　if (document.all){

　　//如果判断是ie的话，向htm中写入＜/div＞

　　document.write('＜/div＞')

　　//定义由＜div＞标记控制的层的属性

　　themenu=document.all.slidemenubar2.style

　　rightboundary=0

　　leftboundary=-150

　　}

　　else{

　　//如果判断出不是IE的话，就要定义＜layer＞标记控制的层的属性

　　themenu=document.layers.slidemenubar

　　rightboundary=150

　　leftboundary=10

　　}

　　//定义pull()函数，控制当鼠标移动到导航条上时应执行的命令

　　function pull(){

　　//判断现在的状态，如果是处于菜单移动回去的状态(即drawit函数在运行)则使用clearInterval停止drawit函数的运行。

　　if (window.drawit)

　　clearInterval(drawit)

　　//使用setinterval控制每隔50毫秒运行一个pullengine函数

　　pullit=setInterval("pullengine()",50)

　　}

　　//定义draw()函数，控制当鼠标移动出导航条时应执行的命令

　　function draw(){

　　//使用clearInterval停止pullit函数的运行。

　　clearInterval(pullit)

　　//使用setinterval控制每隔50毫秒运行一个drawengine函数

　　drawit=setInterval("drawengine()",50)

　　}

　　//这里是重点，控制导航条移动，每次5个像素

　　//自定义pullengine()函数

　　function pullengine(){

　　//当判断是IE浏览器，并且导航条的左边框坐标小于设置的rightboundary的值的时候，导航条向右移动5个像素

　　if (document.all&&themenu.pixelLeft＜rightboundary)

　　themenu.pixelLeft+=5

　　//当判断不是IE浏览器，并且导航条的左边框坐标小于设置的rightboundary的值的时候，导航条向右移动5个像素

　　else if(document.layers&&themenu.left＜rightboundary)

　　themenu.left+=5

　　//如果当导航条的左边框坐标大于设置的rightboundary的值并且pullit函数还在运行的时候

　　else if (window.pullit)

　　//停止pullit的运行

　　clearInterval(pullit)

　　}

　　//自定义drawengine()函数

　　function drawengine(){

　　//当判断是IE浏览器，并且导航条的左边框坐标大于设置的leftboundary的值的时候，导航条向左移动5个像素

　　if (document.all&&themenu.pixelLeft＞leftboundary)

　　themenu.pixelLeft-=5

　　//当判断不是IE浏览器，并且导航条的左边框坐标大于设置的leftboundary的值的时候，导航条向左移动5个像素

　　else if(document.layers&&themenu.left＞leftboundary)

　　themenu.left-=5

　　//如果当导航条的左边框坐标小于设置的leftboundary的值并且drawit函数还在运行的时候

　　else if (window.drawit)

　　//停止drawit的运行

　　clearInterval(drawit)

　　}

　　＜/script＞

　　3.技巧点拨

　　你可以将sitems数组内的内容，改变为自己所需要的内容，例如：sitems[0]="主页 IE-Zone.com" 其实是栏目名字。

　　你可以将sitemslinks数组的内容，改变为自己所需要的内容，例如：sitemlinks[0]=”http://www.ie-zone.com/index.php”其实就是你自己的栏目连接。

　　你可以自己配置导航条的一些属性：

　　top:170px; //离顶部高度

　　border:1.5px solid green;//边框属性

　　background-color:lightyellow;//背景颜色

　　layer-background-color:lightyellow;//层的背景颜色

　　font:bold 12px Verdana;//文字属性

　　line-height:20px;//行高

　　那么，我们再来看看是如何实现的滑动导航效果呢？以导航条滑动出来的运动为例，最重要的在于对setInterval()的使用，我们可以利用setInterval()来控制每间隔一个时间段来执行一次命令，在本例中我们设置了一个函数pullengine()，每运行其一次导航条的位置将向右移动5个像素，由于重复运行这个函数的时间间隔很短(为50毫秒)因此持续不断的导航条位置改变就形成动画效果。值得注意的是，在我们调用另一个函数的时候，应当使用clearInterval()将不断运行的函数中止。

　　另外的一个要点就是针对不同的浏览器使用不同的代码与命令，如何作出适用于IE与NS的js程序是要下一番工夫的，主要在于你必须和好的理解掌握IE与NS的不同之处。

　　在本例中，我们主要使用document.all拉判断是否IE浏览器。

　　好了，现在你制作出了第一个动态的导航条，怎么样，效果是不是很酷？

　　实例六　键盘控制的导航

　　1.效果描述

　　在打开页面后，可以在窗口左侧看到导航条的表格的一条边，如果你象上一节一样，使用鼠标是无法让导航条弹出的，但是当鼠标移动到导航条上的时候将出现“按下键盘上x键可以展开导航条，按下z键可以收回导航条”的提示。只要按下键盘上的X键，导航条将从左到右运动直至完全显示而静止，按下键盘上Z键导航条将从右到左运动，直至恢复初始状态。

　　2.重点函数、对象、方法、属性

　　(1)事件(event)对象

　　Exploer的事件对象的属性

　　(2)运算符的先后顺序

　　如果你在写程序的时候，搞不清楚运算的次序，建议使用括号括住。用括号括住的文字或运算是优先的。

　　实例代码及注释：　

　　第一步：将下面的代码写入到htm页面 ＜head＞＜/head＞标签之间。由于本效果代码有很多与前一节的代码相同，我们制作简单的提示，不再做详细讲解。

　　＜style＞

　　＜!--

　　#slidemenubar, #slidemenubar2{

　　position:absolute;

　　left:-155px;

　　width:160px;

　　top:170px;

　　border:1.5px solid green;

　　background-color:lightyellow;

　　layer-background-color:lightyellow;

　　font:bold 12px Verdana;

　　line-height:20px;

　　}

　　--＞

　　＜/style＞

　　//在导航条上将要使用的样式表，你可以自行更改为喜欢的样式。

　　第二步：将下面的代码写入到页面 ＜body＞＜/body＞ 之间

　　＜script language="JavaScript1.2"＞

　　//自定义showtip函数，用来显示当鼠标移动到导航条上时出现的提示

　　function showtip(nulling){

　　//判断浏览器类型

　　if (document.all){

　　//当nulling为0(这个值是由鼠标事件传递过来的，用以判断鼠标的状态是进入导航条区域还是离开了导航条的区域)并且导航条处于没有移动的原始状态的时候，显示提示

　　if (nulling==0&&slidemenubar2.style.pixelLeft==-150)

　　slidemenubar2.title='按下键盘x键可以展开导航条，按下z键可以收回导航条'

　　//否则，不显示提示

　　else

　　slidemenubar2.title=''

　　}

　　//当浏览器为NS浏览器的时候

　　else if (document.layers){

　　//当nulling为0并且pullit()没有执行的情况下，显示提示

　　if (nulling==0&&!window.pullit)

　　window.status='按下键盘x键可以展开导航条，按下z键可以收回导航条'

　　//否则不显示提示

　　else

　　window.status=''

　　}

　　}

　　//如果是IE浏览器

　　if (document.all)

　　//在代码中用div标记作为容器放置导航条(注意：在鼠标事件onMouseover与onMouseout后面我们都传递了一个值给showtip()函数，用做判断的标准)

　　document.write('＜div id="slidemenubar2" style="left:-150" onMouseover="showtip(0)" onMouseout="showtip(1)"＞')

　　＜/script＞

　　//对于NS浏览器，无法识别div标记，我们只能使用＜layer＞作为容器放置导航条

　　＜layer id="slidemenubar" onMouseover="showtip(0)" onMouseout="showtip(1)"＞

　　＜script language="JavaScript1.2"＞

　　//自定义两个数组

　　var sitems=new Array()

　　var sitemlinks=new Array()

　　//在数组中放置导航条的内容

　　sitems[0]="Home"

　　sitems[1]="Take our survey!"

　　sitems[2]="Menus And Navigation"

　　sitems[3]="Document Effects"

　　sitems[4]="Scrollers"

　　sitems[5]="Image Effects"

　　sitems[6]="Links And Buttons"

　　sitems[7]="Dynamic Clocks & Dates"

　　sitems[8]="Text Animations"

　　sitems[9]="Browser Window"

　　sitems[10]="User System Information"

　　sitems[11]="Cascading Style Sheets"

　　sitems[12]="Other"

　　//在这个数组中放置导航条的链接

　　sitemlinks[0]="../test.htm"

　　sitemlinks[1]=".."

　　sitemlinks[2]="../dynamicindex1/index.html"

　　sitemlinks[3]="../dynamicindex3/index.html"

　　sitemlinks[4]="../dynamicindex2/index.html"

　　sitemlinks[5]="../dynamicindex4/index.html"

　　sitemlinks[6]="../dynamicindex5/index.html"

　　sitemlinks[7]="../dynamicindex6/index.html"

　　sitemlinks[8]="../dynamicindex10/index.html"

　　sitemlinks[9]="../dynamicindex8/index.html"

　　sitemlinks[10]="../dynamicindex9/index.html"

　　sitemlinks[11]="../dynamicindex7/index.html"

　　sitemlinks[12]="../dynamicindex11/index.html"

　　//利用for 循环与document.write方法来将两个数组的数据相对应的写入页面中

　　for (i=0;i＜=sitems.length-1;i++)

　　document.write('＜a href='+sitemlinks[i]+'＞'+sitems[i]+'＜/a＞＜br＞')

　　＜/script＞

　　＜/layer＞＜script language="JavaScript1.2"＞

　　//如果是IE浏览器，在代码中写入＜/div＞结束＜div＞标签

　　if (document.all){

　　document.write('＜/div＞')

　　//设置导航条属性的初始值

　　themenu=document.all.slidemenubar2.style

　　rightboundary=0

　　leftboundary=-150

　　}

　　else{

　　//当浏览器为NS的时候设置导航条属性的初始值

　　themenu=document.layers.slidemenubar

　　rightboundary=150

　　leftboundary=10

　　}

　　//自定义函数pull()，控制当鼠标移动到导航条上时应执行的命令

　　function pull(){

　　//判断现在的状态，如果是处于菜单移动回去的状态(即drawit函数在运行)则使用clearInterval停止drawit函数的运行。

　　if (window.drawit)

　　clearInterval(drawit)

　　//使用setinterval控制每隔50毫秒运行一个pullengine函数

　　pullit=setInterval("pullengine()",50)

　　}

　　//定义draw()函数，控制当鼠标移动出导航条时应执行的命令

　　function draw(){

　　//使用clearInterval停止pullit函数的运行。

　　clearInterval(pullit)

　　//使用setinterval控制每隔50毫秒运行一个drawengine函数

　　drawit=setInterval("drawengine()",50)

　　}

　　//自定义pullengine()函数

　　function pullengine(){

　　//当判断是IE浏览器，并且导航条的左边框坐标小于设置的rightboundary的值的时候，导航条向右移动5个像素

　　if (document.all&&themenu.pixelLeft＜rightboundary)

　　themenu.pixelLeft+=5

　　//当判断不是IE浏览器，并且导航条的左边框坐标小于设置的rightboundary的值的时候，导航条向右移动5个像素

　　else if(document.layers&&themenu.left＜rightboundary)

　　themenu.left+=5

　　//如果当导航条的左边框坐标大于设置的rightboundary的值并且pullit函数还在运行的时候

　　else if (window.pullit)

　　//停止pullit的运行

　　clearInterval(pullit)

　　}

　　//自定义drawengine()函数

　　function drawengine(){

　　//当判断是IE浏览器，并且导航条的左边框坐标大于设置的leftboundary的值的时候导航条向左移动5个像素

　　if (document.all&&themenu.pixelLeft＞leftboundary)

　　themenu.pixelLeft-=5

　　//当判断不是IE浏览器，并且导航条的左边框坐标大于设置的leftboundary的值的时候，导航条向左移动5个像素

　　else if(document.layers&&themenu.left＞leftboundary)

　　themenu.left-=5

　　//如果当导航条的左边框坐标小于设置的leftboundary的值并且drawit函数还在运行的时候

　　else if (window.drawit)

　　//停止drawit的运行

　　clearInterval(drawit)

　　}

　　//这是本例的关键，如何判断指定的键盘上按键是否被按下。

　　if (document.layers)

　　//利用event的属性检测到底被按下的是哪个按键。

　　document.captureEvents(Event.KEYPRESS)

　　//自定义函数menuengine()用来判断键盘事件

　　function menuengine(e){

　　//当浏览器为NS 的时候，

　　if (document.layers){

　　//如果被按下的键的ASC||代码为120(代表x键)，执行pull()函数

　　if (e.which==120)

　　pull()

　　//如果被按下的键的ASC||代码为122(代表z键)，执行draw()函数

　　if (e.which==122)

　　draw()

　　}

　　//当浏览器为IE的时候

　　else if (document.all){

　　//如果被按下的键的ASC||代码为120(代表x键)，执行pull()函数

　　if (event.keyCode==120)

　　pull()

　　//如果被按下的键的ASC||代码为122(代表z键)，执行draw()函数

　　if (event.keyCode==122)

　　draw()

　　}

　　}

　　//当键盘按下的时候执行menuengine函数

　　document.onkeypress=menuengine

　　＜/script＞

　　3.技巧点拨

　　你可以将sitems数组内的内容改变为自己所需要的内容，例如sitems[0]="主页 IE-Zone.com" 其实是栏目名字，你可以将sitemslinks数组的内容改变为自己所需要的内容，例如：sitemlinks[0]=”http://www.ie-zone.com/index.php”其实就是你自己的栏目连接。

　　你也可以自己配置导航条的属性 ：

　　top:170px; //离顶部高度

　　border:1.5px solid green;//边框属性

　　background-color:lightyellow;//背景颜色

　　layer-background-color:lightyellow;//层的背景颜色

　　font:bold 12px Verdana;//文字属性

　　line-height:20px;//行高

　　你可以通过修改按键所对应的ASC||码来改变按下的键来控制导航条。

　　应该着重注意的是如何检测键盘事件。首先我们先要知道如何启动一个所谓的事件 (event)，我们使用了document.onkeypress来响应键盘时间并且调用函数。Onkeypress是document的一个事件，指的是按下按键后又松开。更多的document事件请看本节前面的document事件表。

　　　document.onkeypress = keyDown

　　这里的keypress是你所要编写的相应键盘的子程序。当你的浏览器读了以上的语句，它将会知道哪个键被按下了，然后启动子程序keypress()。子程序的名字随你命名了，在这里在子程序名字后面不需要括号。取得哪个键被按下在Netscape和IE有所不同。

　　对于Netscape：

　　Netscape 在处理取得哪个键被敲击的时候比较烦琐点儿。

　　document.onkeydown = keypress

　　if (NS) document.captureEvents(Event.KEYpress)

　　你的keypress()子程序必须传递一个隐藏的变量， 我们这里把这比变量叫"e"。

　　function keypress(e)

　　这个"e"表示那个被按的键。想要知道哪个键被按了，你需要用e的which性质：e.which

　　这只能告诉你这个键的内部码，所以你还要用字串处理程序把它转成数字或字母：String.fromCharCode(e.which)

　　IE的语句比较简单一些，但它不是用e.which而是用window.event.keyCode来取得被按的键的值。

　　另外就是event对象的使用，在本例我们使用了event的keycode属性来判断到底拿一个按键被按下。Event的详细属性，请看本节前面的event属性表。

　　实例七　样式表控制的导航

　　1.效果描述

　　在打开页面后，可以在窗口左侧看到导航条的表格的一条边，将鼠标放到上面，你就会看到导航条从屏幕外面滑动到了窗口以内，当其内容完全显示后将会静止。如果你的鼠标移出导航条的范围，导航条将自动的滑动到屏幕以外。导航条运动的效果与第一节的实例效果完全一致,但是对比两个导航条的外观效果就不可同日而语了,本例中的导航条华丽美观,每一个选择项都会感应鼠标动作而产生颜色上的变化。整体的风格更接近于我们平时所熟悉的软件中的菜单,总之一个字就是“酷”！其实这一切的原理并不深奥，都是利用javascript与样式表联手完成的。

　　2.重点函数、对象、方法、属性

　　(1)利用js写入html代码的方法：

　　在前面几节都有接触，我们使用的是document.write方法来写入代码，现在来详细了解一下。由于js中，字符串被双引号或单引号标识后加以使用，那么在字符串内有引号怎么办？我们使用反歇杠(\)来表示，例如以\”代表双引号，\’代表单引号。而对于一段htm代码我们要将其和一些js的变量函数连接的时候可以使用连接运算符，“+”号，例如：

　　document.write('＜TR＞＜TD BGCOLOR="'+linkBGColor+'" ＞＜/TD＞＜/TR＞')}实际上的htm代码是：

　　＜tr＞＜td bgcolor=(linkbgcolor所定义的颜色)＞＜/td＞＜/tr＞

　　(2)settimeout方法

　　属于frame对象和window对象的方法，用语周期性的反复执行某一函数。

　　格式：

　　timeid=settimeout(函数,[周期])

　　[timeid]使用的是为了通过clear timeout方法终止程序运行而设置的标记。[函数]设置可以重复执行的函数，而且函数需要重新调用。[周期]设置为以1/1000秒为单位的数字。

　　大家可以看到settimeout方法与setinterval方法的使用非常相似，它们的区别在于：为了以一定的时间间隔调用函数，settimeout方法每次都需要重新调用函数，而setinterval方法只需要调用一次函数，以后每隔一段时间自动执行一次。

　　(3)window对象的事件

　　实例代码及注释：

　　第一步，将下面的代码复制到＜head＞＜/head＞标记中间：

　　＜style＞

　　＜!--

　　#ssm2 A {

　　 color:black;

　　 text-decoration:none;

　　 font-size:12;

　　 font-family:verdana;

　　 }

　　#ssm2 A:hover {

　　 color:red;

　　 }

　　--＞

　　＜/style＞

　　//此处为定义的一个样式表

　　第二步，将下面的代码复制到＜body＞＜/body＞标记中间：

　　＜script language="JavaScript1.2"＞

　　//为方便输入代码，将判断浏览器要使用的条件写在变量IE，NS中

　　var NS

　　IE=document.all;

　　NS=document.layers;

　　//定义一些html的属性，主要是文字的颜色，字体属性

　　hdrFontFamily="Verdana";

　　hdrFontSize="2";

　　hdrFontColor="white";

　　hdrBGColor="#666666";

　　linkFontFamily="Verdana";

　　linkFontSize="2";

　　linkBGColor="white";

　　linkOverBGColor="#CCCCCC";

　　linkTarget="_top";

　　YOffset=60;

　　staticYOffset=20;

　　menuBGColor="black";

　　menuIsStatic="no";

　　menuHeader="Main Index"

　　menuWidth=150; // Must be a multiple of 5!

　　staticMode="advanced"

　　barBGColor="#1298fd";

　　barFontFamily="Verdana";

　　barFontSize="2";

　　barFontColor="white";

　　barText="MENU";

　　//自定义函数moveOut()，控制当鼠标移到导航条的范围的时候导航条向终止位置移动的效果

　　function moveOut() {

　　if (window.cancel) {

　　　cancel="";

　　}

　　//当moving2函数在运行的时候

　　if (window.moving2) {

　　//停止moving2的计时及运行

　　　clearTimeout(moving2);

　　　moving2="";

　　}

　　//判断浏览器类型，并判断导航条的左边框是否还未移动到最终的终止位置

　　if ((IE && ssm2.style.pixelLeft＜0)||(NS && document.ssm2.left＜0)) {

　　//如果是IE浏览器，导航条向左移动5个像素

　　　if (IE) {ssm2.style.pixelLeft += 5;

　　}

　　//如果是NS浏览器，导航条向左移动5个像素

　　if (NS) {

　　　document.ssm2.left += 5;

　　}

　　//使用setTimeout提供一个时间间隔(为5毫秒)来运行moveout()函数

　　moving1 = setTimeout('moveOut()', 5)

　　}

　　//当不符合以上条件的时候，终止moving1的计时及循环运行

　　else {

　　　clearTimeout(moving1)

　　　}

　　};

　　function moveBack() {

　　　cancel = moveBack1()

　　}

　　//自定义函数moveback()，控制当鼠标移出导航条的范围的时候导航条向初始位置移动的效果

　　function moveBack1() {

　　//判断moving1是否在运行，如果是，则终止其的运行与计时

　　　if (window.moving1) {

　　clearTimeout(moving1)

　　}

　　//判断浏览器类型，并判断导航条的左边框是否还未移动到最终的终止位置

　　if ((IE && ssm2.style.pixelLeft＞(-menuWidth))||(NS && document.ssm2.left＞(-150))) {

　　//如果是IE浏览器，导航条向左移动5个像素

　　　if (IE) {ssm2.style.pixelLeft -= 5;

　　//如果是NS浏览器，导航条向左移动5个像素

　　if (NS) {

　　　document.ssm2.left -= 5);

　　}

　　//使用setTimeout提供一个时间间隔(为5毫秒)来运行moveout()函数

　　moving2 = setTimeout('moveBack1()', 5)}

　　//当不符合以上条件的时候，终止moving1的计时及循环运行　

　　else {

　　clearTimeout(moving2)

　　　}

　　};

　　//自定义函数init()

　　function init() {

　　//当为IE浏览器的时候设置导航条的初始位置(ssm2为导航条所在容器的ID，在后面的代码中将进行定义)，并且使导航条的状态为可见的

　　if (IE) {

　　ssm2.style.pixelLeft = -menuWidth;

　　ssm2.style.visibility = "visible"

　　}

　　//当为IE浏览器的时候设置导航条的初始位置(ssm2为导航条所在容器的ID，在后面的代码中将进行定义)，并且使导航条的状态为可见的

　　else if (NS) {

　　document.ssm2.left = -menuWidth;

　　document.ssm2.visibility = "show"

　　}

　　}

　　＜/script＞

　　＜script language="JavaScript1.2"＞

　　//当浏览器为IE的时候，利用document.write写入＜div＞标记作为导航条的容器,注意我们摄制了其id属性为ssm2，这是为了让javascript可以对其进行控制，style 后面的代码是div标签的样式

　　if (IE) {document.write('＜DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()"＞')}

　　//当浏览器为IE的时候，利用document.write写入＜div＞ 标记作为导航条的容器,注意我们摄制了其name属性为ssm2，这是为了让javascript可以对其进行控制if (NS) {document.write('＜LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()"＞')}

　　//定义tempbar为空

　　tempBar=""

　　//利用for循环以及barText.length所得到的bartext字符串的长度，来将bartext字符串的内容以竖行的形式写入到页面中

　　for (i=0;i＜barText.length;i++) {

　　tempBar+=barText.substring(i, i+1)+"＜BR＞"}

　　//利用document.write写入htm代码，并且用到了我们在前面所定义的一些字符的属性。我们将其设置为变量是为了在输入的时候更加方便

　　document.write('＜table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"＞＜tr＞＜td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"＞ ＜font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"＞＜b＞'+menuHeader+'＜/b＞＜/font＞＜/td＞＜td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"＞＜p align="center"＞＜font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"＞＜B＞'+tempBar+'＜/B＞＜/font＞＜/p＞＜/TD＞＜/tr＞')

　　//自定义addItem函数，此函数需要传递两个值text, link

　　function addItem(text, link) {

　　//写入htm代码，注意onmouseover与onmouseout后面的代码，在那里我们定义了背景颜色，这样的话，当鼠标移动到一个单元格上时，背景色将改变为当鼠标移动单元格时的背景色。移开后，又恢复原来的背景色，使导航更具魅力

　　document.write('＜TR＞＜TD BGCOLOR="'+linkBGColor+'"

　　onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"＞

　　//这是针对NS的写法

　　＜ILAYER＞＜LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"＞

　　//使用传递的值link与text构成导航条的内容。

　　＜FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"＞ ＜A HREF="'+link+'" CLASS="ssm2Items"＞'+text+'＜/A＞＜/FONT＞＜/LAYER＞＜/ILAYER＞＜/TD＞＜/TR＞')}

　　//自定义addhsr()函数，用来构成导航条中的标题

　　function addHdr(text) {

　　document.write('＜tr＞＜td bgcolor="'+hdrBGColor+'" WIDTH="140"＞ ＜font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"＞＜b＞'+text+'＜/b＞＜/font＞＜/td＞＜/tr＞')}

　　//定义的additem与addhdr的值，所有这些值都将被上面的代码写入到htm中以构成导航条的标题与内容

　　addItem('Dynamic Drive', 'http://www.dynamicdrive.com');

　　addItem('What\'s New', 'http://www.dynamicdrive.com/new.htm');

　　addItem('What\'s Hot', 'http://www.dynamicdrive.com/hot.htm');

　　addItem('Forum', 'http://wsabstract.com/cgi-bin/Ultimate.cgi');

　　addItem('FAQs', 'http://www.dynamicdrive.com/faqs.htm');

　　addItem('Submit', 'http://www.dynamicdrive.com/submitscript.htm');

　　addHdr('External Links');

　　addItem('Website Abstraction', 'http://wsabstract.com');

　　addItem('Freewarejava', 'http://freewarejava.com');

　　addItem('DHTML Zone', 'http://www.dhtml-zone.com/');

　　addItem('Active-X.com', 'http://www.active-x.com');

　　addItem('Web Review', 'http://www.webreview.com');

　　addItem('David\'s Website', 'http://www.david-thurston.co.uk');

　　//最后完成htm标记的输入，还是要分IE与NS两种情况来对待

　　document.write('＜tr＞＜td bgcolor="'+hdrBGColor+'"＞＜font size="0" face="Arial"＞ ＜/font＞＜/td＞＜/TR＞＜/table＞')

　　if (IE) {document.write('＜/DIV＞')}

　　if (NS) {document.write('＜/LAYER＞')}

　　＜/script＞

　　＜script＞

　　//在此页面被载入的时候开始调用init()函数(即设置了导航条的初始位置)

　　window.onload=init

　　＜/script＞

　　3.技巧点拨

　　大家可以看到虽然本例的动态效果第一节的实例完全一样，但是很多的代码却并不相同，这就说明解决的问题有很多种，而找到最简单，最有效的解决途径是我们应当努力追求的。被例中大量的使用了定义变量来代替一段代码的方式简化代码，使整段代码更简洁易懂，这是我们应当留意并熟悉掌握的。同样，可以看到与前例不同的是，本例中导航条的内容不是用定义数组后循环输入的方式完成的，而是利用了定义函数的方法。

　　最后，可以配置你的导航条 下面这段配置导航条内容：

　　addItem('Dynamic Drive', 'http://www.dynamicdrive.com');

　　addItem('What\'s New', 'http://www.dynamicdrive.com/new.htm');

　　addItem('What\'s Hot', 'http://www.dynamicdrive.com/hot.htm');

　　addItem('Forum', 'http://wsabstract.com/cgi-bin/Ultimate.cgi');

　　addItem('FAQs', 'http://www.dynamicdrive.com/faqs.htm');

　　addItem('Submit', 'http://www.dynamicdrive.com/submitscript.htm');

　　addHdr('External Links');

　　addItem('Website Abstraction', 'http://wsabstract.com');

　　addItem('Freewarejava', 'http://freewarejava.com');

　　addItem('DHTML Zone', 'http://www.dhtml-zone.com/');

　　addItem('Active-X.com', 'http://www.active-x.com');

　　addItem('Web Review', 'http://www.webreview.com');

　　addItem('David\'s Website', 'http://www.david-thurston.co.uk');

　　你可以将以上代码中的文字与链接任意的更改，也可以增加或者删除一些选项。

　　实例八　不同鼠标形状的导航

　　1.效果描述

　　打开本例后，你将看到一个静止的导航条，一点也没有奇怪的地方，但当你将鼠标移动到导航条的选择项上的时候，会发现导航条文字的颜色，大小，及背景色都发生了变化，尤其奇怪的是，鼠标箭头不再是我们平常在点击链接时看到的手状，而是变成了一个十字形。

　　2.重点函数、对象、方法、属性

　　(1)js动态替换样式标

　　W3C在1996年发布了CSS(Cascading Stylesheets，层叠样式表)。无论是NS还是IE均可支持CSS Level 1。使用CSS，IE与NS可以显示几乎一致的字体。而在此之前使用HTML标记＜Font＞来定义字体，在NS 显示的是楷体，而在IE中却会显示花体。到现在CSS是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。

　　W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现：脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

　　(2)用样式表定义鼠标式样

　　在网页上，鼠标平时呈箭头形，指向链接时成为手形，等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么，但这些好像还不能完全地满足我们的需要。就拿链接来说，可以是指向一个帮助文件，也可以是向前进一页或是向后退一页，针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是，CSS提供了多达13种的鼠标形状，供我们选择。

　　基本格式如下：

　　cursor：鼠标形状参数

　　CSS鼠标形状参数表：

　　style="cursor:hand"

　　手形

　　style="cursor:crosshair"

　　十字形

　　style="cursor:text"

　　文本形

　　style="cursor:wait"

　　沙漏形

　　style="cursor:move"

　　十字箭头形

　　style="cursor:help"

　　问号形

　　style="cursor:e-resize"

　　右箭头形

　　style="cursor:n-resize"

　　上箭头形

　　style="cursor:nw-resize"

　　左上箭头形

　　style="cursor:w-resize"

　　左箭头形

　　style="cursor:s-resize"

　　下箭头形

　　style="cursor:se-resize"

　　右下箭头形

　　style="cursor:sw-resize"

　　左下箭头形 　　

　　第一步：将以下代码输入到页面＜head＞＜/head＞之间。

　　＜style＞＜!--

　　.menuh {color=red;

　　 BORDER-COLOR : #FFFF99 ;

　　 cursor:crosshair;

　　 Border-Left : #FFFF99 ;

　　 Border-Top : #FFFF99 ;

　　 Padding-Left : 1px ;

　　 Padding-Top : 1px ;

　　 Background-Color : #FFFF99 ;

　　}

　　.menu {

　　 Background-Color : white ;

　　}

　　.menulinks{

　　color=blue;

　　font-size:9pt

　　text-decoration:none;

　　}

　　//--＞＜/style＞

　　//定义一个样式表，其中.menu是初始状态的样式，.menuh是当鼠标移动到导航条上时使用的样式，.menulinks是当判断为NS浏览器的时候在链接中使用的样式。

　　第二步：将以下代码输入到页面＜body＞＜/body＞。

　　＜script＞

　　＜!--

　　//声名变量用于存储导航条的宽度，以及相对于页面的位置

　　var menuwidth=110

　　var offsetleft=10

　　var offsettop=90

　　//自定义makeStatic()函数，

　　function makeStatic() {

　　//如果是IE浏览器，确定导航条距离页面顶部的距离

　　if (document.all) {object1.style.pixelTop=document.body.scrollTop+offsettop}

　　//如果是NS浏览器，确定导航条距离页面顶部的距离

　　else{eval(document.object1.top=eval(window.pageYOffset+offsettop));}

　　setTimeout("makeStatic()",0);

　　}

　　//判断是浏览器，写入代码到页面中，注意当判断为IE浏览器的时候使用div标记作为容器，并且div的id被设置为object1,当判断为NS浏览器的时候，使用layer标记作为容器，并且name属性设置为object1。

　　if (document.all) {document.write('＜DIV ALIGN="CENTER" ID="object1" STYLE="Position:absolute; Top:20; Left:'+offsetleft+'; Z-Index:5;cursor:hand;background-color:black"＞＜TABLE BORDER="1" width="'+menuwidth+'" CELLPADDING="0" CELLSPACING="0" BORDERCOLOR="black" bgcolor="white"＞')}

　　else if (document.layers){ document.write('＜LAYER top="20" name="object1" left="'+offsetleft+'" BGCOLOR=black＞＜TABLE BORDER="0" CELLPADDING="0" CELLSPACING="1"＞＜TR＞＜TD＞＜TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" width="'+menuwidth+'"＞')}

　　//写入兼容IE与NS的代码因此不需要做判断

　　if (document.all||document.layers)

　　document.write('＜TR＞＜TD BGCOLOR="#3399FF" BORDERCOLORDARK="#99CCFF" BORDERCOLORLIGHT="#003399"＞＜P ALIGN=CENTER＞＜FONT SIZE="4" FACE=ARIAL＞Menu＜/FONT＞＜/TD＞＜/TR＞')

　　//声明两个数组，用来放置导航条的内容与链接

　　var menui = new Array();

　　var menul = new Array();

　　//你可以自己更改以下的内容，以使导航条符合自己的需要

　　menui[0]="Dynamic Drive";

　　menui[1]="What\'s New?";

　　menui[2]="What\'s Hot?";

　　menui[3]="Message Forum";

　　menui[4]="FAQs";

　　menui[5]="Submit Script";

　　menui[6]="Link to us";

　　menui[7]="Email us";

　　menul[0]="http://dynamicdrive.com";

　　menul[1]="http://dynamicdrive.com/new.htm";

　　menul[2]="http://dynamicdrive.com/hot.htm";

　　menul[3]="http://wsabstract.com/cgi-bin/Ultimate.cgi";

　　menul[4]="http://dynamicdrive.com/faqs.htm";

　　menul[5]="http://dynamicdrive.com/submit.htm";

　　menul[6]="http://dynamicdrive.com/link.htm";

　　menul[7]="http://dynamicdrive.com/contact.htm";

　　//和前几节一样，使用for循环将放置在数族内的值写入到页面中，要注意的是动态改变样式表的技巧。

　　for (i=0;i＜=menui.length-1;i++)

　　if (document.all) {document.write('＜TR＞＜TD BORDERCOLOR="white" ONCLICK="location=\''+menul[i]+'\'" onmouseover="className=\'menuh\'" onMouseout="className=\'menu\'"＞＜CENTER＞'+menui[i]+'＜/TD＞＜/TR＞')}

　　else if (document.layers){document.write('＜TR＞＜TD BGCOLOR="white"＞＜ILAYER＞＜LAYER width="'+menuwidth+'" onmouseover="bgColor=\'yellow\'" onmouseout="bgColor=\'white\'"＞＜CENTER＞＜A HREF="'+menul[i]+'" class=menulinks＞'+menui[i]+'＜/A＞＜/CENTER＞＜/LAYER＞＜/ILAYER＞＜/TD＞＜/TR＞')}

　　if (document.all) {document.write('＜/TABLE＞＜/DIV＞')}

　　else if (document.layers){document.write('＜/TABLE＞＜/TD＞＜/TR＞＜/TABLE＞＜/LAYER＞')}

　　//定义函数。使不论是何种浏览器都将运行makestatic()函数(即动态生成导航条的函数)

　　function menu3(){

　　if (document.all||document.layers)

　　makeStatic()

　　}

　　//当页面被载入的时候，运行函数menu3

　　window.onload=menu3

　　//--＞

　　＜/script＞

　　3.技巧点拨

　　没什么好多说的，从本节的内容里大家应该看出了熟练将htm、css、js结合使用是多么的神奇，如果想学好js，不做到详细了解css与htm是不可能的，加油吧，朋友。

　　实例九　树型菜单

　　1.效果描述

　　在打开页面后，可以在窗口左侧看到三个菜单选项，由关闭的文件夹图标以及文字的说明组成，当使用鼠标点击其中一个菜单选项，该菜单项前面的图标将变成打开的文件夹图标，并且在选项下方会出现菜单的子项，点击子项就可以链接到不同的内容页面，再次点击菜单项，图标将变为关闭的文件夹图标，而菜单子项将消失。

　　2.重点函数、对象、方法、属性

　　(1)src 属性

　　作为图象属性之一，用于设置图象的url地址，这和在＜img＞中利用src设置地址的方法所起的作品是一样的。

　　格式：

　　image名称.src

　　实例：

　　image1.src="pcking.gif "

　　注意的是应当使用相对路径

　　(2)srcElement

　　 event.srcElement是当前事件的对象。

　　实例：

　　srcIndex = event.srcElement.sourceIndex

　　实例代码及注释：

　　将下面的代码输入到 ＜head＞＜/head＞之间。

　　＜style＞

　　＜!--

　　#foldheader{cursor:hand ; font-weight:bold ;

　　list-style-image:url(fold.gif)}

　　#foldinglist{list-style-image:url(list.gif)}

　　//--＞

　　＜/style＞

　　//定义一个样式表

　　将下面的代码输入到＜head＞＜/head＞之间。

　　＜script language="JavaScript1.2"＞

　　＜!--

　　//声明变量，用img.src来储存图片的路径。Img1.src储存的是文件夹图标，img2.src储存的是打开的文件夹图标

　　var head="display:''"

　　img1=new Image()

　　img1.src="fold.gif"

　　img2=new Image()

　　img2.src="foldopen.gif"

　　//定义函数change()，其用途是当鼠标点击菜单时，来替换显示的图标(即是显示文件夹图标还是显示打开的文件夹图标)

　　function change(){

　　　//判断鼠标在页面中单击的是不是菜单项(只有菜单项的id 才是foldheader)

　　if (event.srcElement.id=="foldheader") {

　　//声明变量，event.srcElement是当前事件的对象。 sourceIndex是按位置的顺序返回对象。

　　　 var srcIndex = event.srcElement.sourceIndex

　　　 var nested = document.all[srcIndex+1]

　　　 //当此元素的显示属性为none时(即该元素不显示)

　　　 if (nested.style.display=="none") {

　　　 //显示该元素

　　　　 nested.style.display=''

　　//设置显示的图片为foldopen.gif，注意我们是通过动态修改样式表来达到目的的

　　　　 event.srcElement.style.listStyleImage="url(foldopen.gif)"

　　　 }

　　　 //如果此元素的显示属性不是none(即表示此菜单已经被打开了)

　　　 else {

　　　 //设置显示属性为none(通过将菜单项设置为不可见，达到将菜单收起来的效果)

　　　　 nested.style.display="none"

　　//设置显示的图片为fold.gif

　　　　 event.srcElement.style.listStyleImage="url(fold.gif)"

　　　}

　　}

　　}

　　//当在页面上单击鼠标时即调用change函数进行判断，最后得出应该如何显示的结果

　　document.onclick=change

　　//--＞

　　＜/script＞

　　将下面的代码输入到 ＜body＞＜/body＞内

　　//＜ul＞与＜li＞是html中的列表标记，值得注意的是，我们为元素设置id，以方便js对其进行控制，而且将菜单的详细内容使用style="display:none"样式，使其不可见。

　　＜ul＞

　　＜li id="foldheader"＞News＜/li＞

　　＜ul id="foldinglist" style="display:none"＞

　　　＜li＞＜a href="../../../www.cnn.com/index.html"＞CNN＜/a＞＜/li＞

　　　＜li＞＜a href="../../../www.abcnews.com/index.html"＞ABC News＜/a＞＜/li＞

　　　＜li＞＜a href="../../../www.vancouversun.com/index.html"＞Vancouver Sun＜/a＞＜/li＞

　　＜/ul＞

　　＜li id="foldheader"＞Games＜/li＞

　　＜ul id="foldinglist" style="display:none"＞

　　　＜li＞＜a href="../../../www.gamespot.com/index.html"＞GameSpot＜/a＞＜/li＞

　　　＜li＞＜a href="../../../www.happypuppy.com/index.html"＞Happy Puppy＜/a＞＜/li＞

　　　＜li＞＜a href="../../../www.gamecenter.com/index.html"＞Game Center＜/a＞＜/li＞

　　＜/ul＞

　　＜li id="foldheader"＞Software＜/li＞

　　＜ul id="foldinglist" style="display:none"＞

　　　＜li＞＜a href="../../../www.download.com/index.html"＞outer 1＜/a＞＜/li＞

　　　＜li＞＜a href="../../../www.hotfiles.com/index.html"＞outer 2＜/a＞＜/li＞

　　　＜li id="foldheader"＞Nested＜/li＞

　　　＜ul id="foldinglist" style="display:none"＞

　　　　 ＜li＞＜a href="../../../www.windows95.com/index.html"＞nested 1＜/a＞＜/li＞

　　　　 ＜li＞＜a href="../../../www.shareware.com/index.html"＞nested 2＜/a＞＜/li＞

　　　＜/ul＞

　　　＜li＞＜a href="../../../www.windows95.com/index.html"＞outer 3＜/a＞＜/li＞

　　　＜li＞＜a href="../../../www.shareware.com/index.html"＞outer 4＜/a＞＜/li＞

　　＜/ul＞

　　＜/ul＞

　　3.技巧点拨

　　注意如果你要修改图片时，一定要当心图片的路径与文件名称，不然图片将无法正常显示。另外我们检测页面上每一次鼠标单击事件，并利用change函数中的event.srcElement.id=="foldheader"判断是否点击了菜单项。这是一种很简单的检测方法，当然我们也可以在每一个菜单项上都写入onclick=“函数”用在菜单被点击时执行预先定义的函数，不过这样的话每一个菜单上都要填加代码，很显然不如目前的方法方便。

　　实例十　级联双选择菜单

　　1.效果描述

　　在打开页面后，可以在页面上有两个下拉选择框，点击第一个下拉选择框，选择一个选项，我们会发现在第二个选择框内的选项会跟随着一起变化。比如，在打开页面时，我们在第一个选择框看到的是pcking，第二个选择框内是：flash、fireworks、我是水货。当我们点击第一个选择框，选择小旭旭后，第二个选择框的内容相应变成：dreamweaver、dhtml、我是好蛋…

　　这样的选择框，在制作比较复杂的网站时经常用到，尤其是在你向用户提供很详尽的搜索或定制功能的时候更是不可或缺的。

　　2.重点函数、对象、方法、属性

　　(1)select对象

　　select对象提供了各种属性、方法 和事件、可以处理HTML的＜select＞标记。＜select＞标记能高制作选项列表(listbox)和comboBox。不设置size属性或者将它设置为1，能高制作comoBox，如果将size属性设置为大于一，则可以制作选项列表。

　　＜Select＞标记的格式

　　＜select name="名称" size="大小"　multipe onBlur="handler text" onChange="handler text" onFocus="handler text"＞

　　＜option value="识别名称" selected＞选择项

　　＜/select＞

　　select对象的属性、方法和事件说明：

　　(2)Options属性

　　利用length可以知道选项的个数，利用selecterindex属性可以知道被选中的选项的索引号码。索引号码从0开始，如果没有被选择的项，则返回值为-1。

　　格式：

　　select名称.options.length

　　select名称.options.selectedindex

　　options属性具有数组形态的选项信息。Option包括如下的属性：

　　实例代码及注释：

　　将下面的代码输入到 ＜body＞＜/body＞内

　　//使用html标记，在页面中定义两个下拉选择框，两个下拉框都放置在一个＜form＞ z中，其name属性为doublecombo

　　＜form name="doublecombo"＞

　　＜p＞

　　//第一个下拉框的name属性为example

　　＜select name="example" size="1" onChange="redirect(this.options.selectedIndex)"＞

　　//下拉框中的选择项

　　＜option＞pcking＜/option＞

　　＜option＞小旭旭＜/option＞

　　＜option＞tiger＜/option＞

　　＜/select＞

　　//第二个下拉框的name属性为stage2

　　＜select name="stage2" size="1"＞

　　//下拉框中的选择项

　　＜option value="http://www.pckings.net/index.htm"＞flash＜/option＞

　　＜option value=" http://www.pckings.net /index1.htm"＞fireworks＜/option＞

　　＜option value=" http://www.pckings.net /index2.htm"＞我是水货＜/option＞

　　＜/select＞

　　//按钮，点击按钮后将调用go()函数

　　＜input type="button" name="test" value="Go!"

　　onClick="go()"＞

　　＜/p＞

　　将下面的代码输入到 ＜body＞＜/body＞内

　　＜script＞

　　＜!--

　　//声明变量groups，用来储存下拉框中选项的个数。

　　var groups=document.doublecombo.example.options.length

　　//声明一个数组，用来储存下拉框中的选项，以及每个选项相对应的链接地址

　　　var group=new Array(groups)

　　//利用for循环向数组中放置数据，注意使用的循环条件是I＜groups，即根据下拉框中选择项的数目来决定数组

　　　for (i=0; i＜groups; i++)

　　　group[i]=new Array()

　　//这里储存的是当第一个下拉框选择第一个选项时，在第二个下拉框中显示的选择项及其相应的链接地址

　　　group[0][0]=new Option("flash","http://www.pckings.net/index1.htm")

　　　group[0][1]=new Option("fireworks"," http://www.pckings.net/index2.htm ")

　　　group[0][2]=new Option("我是水货"," http://www.pckings.net/index3.htm ")

　　//这里储存的是当第一个下拉框选择第二个选项时，在第二个下拉框中显示的选择项及其相应的链接地址

　　　group[1][0]=new Option("dreamweaver","http://www.blueidea.com")

　　　group[1][1]=new Option("dhtml"," http://www.blueidea.com /bbs")

　　　group[1][2]=new Option("我是好蛋","http://www.5dmedia.com")

　　//这里储存的是当第一个下拉框选择第三个选项时，在第二个下拉框中显示的选择项及其相应的链接地址

　　　group[2][0]=new Option("蓝色理想"," http://www.blueidea.com ")

　　　group[2][1]=new Option("经典论坛"," http://www.blueidea.com /bbs")

　　　group[2][2]=new Option("5d多媒体","http://www.5dmedia.com")

　　　group[2][3]=new Option("闪盟","http://www.flashsun.com")

　　//声明变量temp，用来储存document.doublecombo.stage2，这样的做法是为了简化程序，使程序看上去不是那么复杂，输入代码的时候也更简单

　　var temp=document.doublecombo.stage2

　　//自定义函数redirect()，当第一个下拉框中选项变化时就执行

　　function redirect(x){

　　//m的值为第二个选择框内选项个数减一，这是因为选择项的索引号码是从0开始的，我们必须将选项个数减一才能得得到正确的索引值

　　　for (m=temp.options.length-1;m＞0;m--)

　　//将所有的选择项清空

　　　temp.options[m]=null

　　//利用for循环，将储存在数组group中的数据读入到第二个选择框的选择项内。注意x 为一个返回值，返回的是第一个选择框当前被选中的选择项的索引号。

　　　for (i=0;i＜group[x].length;i++){

　　//将储存在数组group中的数据读入到第二个选择框的选择项内

　　　temp.options[i]=new Option(group[x][i].text,group[x][i].value)

　　　}

　　//将第二个下拉框的第一个选择项设置为默认选项

　　　temp.options[0].selected=true

　　　}

　　//自定义函数go()，用来控制选项的链接地址

　　function go(){

　　// temp.options[temp.selectedIndex].value就是第二个选择框当前被选择项的链接地址

　　　location=temp.options[temp.selectedIndex].value

　　　}

　　　//--＞

　　　＜/script＞

　　　＜/form＞

　　3.技巧点拨

　　我们在第一个下拉框设置了onChange="redirect(this.options.selectedIndex)"，其含义是当下拉框的选择项变化的时候调用redirect()函数，值得注意的是，我们传递了this.options.selectedIndex这个值给redirect()函数。大家应该都很清楚这个值代表的是，当前第一个下拉框被选择的选择项的索引值。这样做的目的是可以根据这个传递值来决定在第二个选择框内显示哪些内容。在redirect()函数中使用temp.options[i]=new Option(group[x][i].text,group[x][i].value)来调用储存在数组中的值。其中x就是this.options.selectedIndex的值。

　　最后，你可以在我们定义的数组中任意的添加两个选择框的选择项，并任意更改选择项的值。