本实例使用JavaScript制作一个类似QQ界面的网页导航栏,在网站或者B/S软件中增加这种效果的导航栏,对增加页面的友好性是很有好处的。本实例中用到JavaScript的一些固有对象及其属性,大家可以从中看到具体用法。本节主要涉及的JavaScript语法如下:

1.document.all.item

document.all.item通过控件的名字定位控件,item()中是控件的名字。

2.document.all.itemsLayer

document.write()方法

关于document.write()方法在windows.onload方法已经有详细说明,这里不再赘述。

本实例主要代码如下:

<script language="JavaScript">

var layerTop = 40; /*菜单顶边距*/

var layerLeft = 50; /*菜单左边距*/

var layerWidth = 160; /*菜单总宽*/

var titleHeight = 30; /*标题栏高度*/

var contentHeight = 300; /*内容区高度*/

/*移动步数,数值越大移动越慢*/

var stepNo = 10;

var itemNo = 0;

runtimes = 0;

/*网页加载时创建页面内容*/

document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #008800;left; ' + layerleft + '; top:' + layerTop ...

document.write('>/span>');

/*设置所有空间层的各种属性*/

document.all.itemsLayer.style.height = itemNo * titleHeight + content ...

function moveup() {

for (i = onItemIndex + 1; i <= toItemIndex; i++)

/*通过控件的名字定位控件*/

eval('document.all.item' + i + '.style.top=parseInt(document.all.item' + i +'.style.top)-contentHeight/stepNo;');

}

...

</script>

HTML DOM Document对象

Document 对象

每个载入浏览器的HTML文档都会成为Document对象。

提示:Documnet对象使我们可以从脚本中对HTML页面中的所有元素进行访问。

集合 描述

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。