本实例使用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 对象引用。