任务：
- 制作鼠标指针移动特效
- 制作随鼠标滚动的菜单
目标
- 使用style属性制作菜单特效
- 使用className属性制作菜单特效
- 使用scrollTop制作随鼠标指针滚动的广告图片
1. 样式表类型
1.1：内联样式：标签内
1.2：内部样式：head标签之间
1.3：外部样式表：独立的样式文件
2.javascript访问样式的常用方法
2.1：style属性
语法：HTML元素.style.样式属性="值"
实例：
设置某元素颜色为红色，字体大小13px;
document.getElementById("titles").style.color="#ff0000";
document.getElementById("titles").style.fontSize="13px";
2.2：className属性
语法：HTML元素.className="样式名";
实例：
改变某元素鼠标指针移进移出时的效果,over和out是样式名。
vat len=document.getElementByTagName("li");
for(var i=0;i<len.length;i++){
len[i].οnmοuseοver=function(){
this.className="over";
}
len[i].οnmοuseοut=function(){
this.className="out";
}
}
3.JavaScript访问样式的应用
3.1获取样式属性的值：
实例：
获取某元素的座标带px
var obj=document.getElementById("test");
alert("上："+obj.style.top+"\n左："+obj.style.left);
获取某元素的座标值（仅支持IE）
alert("上："+obj.currentStyle.top+"\n左："+obj.currentStyle.left);
获取某元素的座标值（支持FireFox）
alert("上："+document.defaultView.getComputedStyle(obj,null).top+"\n左："+document.defaultView.getComputedStyle(obj,null).left);
4.制作随鼠标滚动的菜单scollTop 、scrollLeft
<html>
<head>
<script type="text/javascript">
var timer
function scrolltop()
{
document.getElementById('scrollmenu').style.top=document.body.scrollTop
timer=setTimeout("scrolltop()",1)
}
function stoptimer()
{
clearTimeout(timer)
}
</script>
</head>
<body οnlοad="scrolltop()" οnunlοad="stoptimer()">
<span id="scrollmenu" style="position:absolute">
<b>菜单</b><br />
<a href="http://www.w3school.com.cn">W3School</a><br />
<a href="http://www.microsoft.com">Microsoft</a><br />
<a href="http://www.altavista.com">Altavista</a><br />
</span>
<table border="0" width="100%">
<tr>
<td width="100"> </td>
<td>滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
滚动页面，就可以看到“置顶”的菜单。
<br /><br /><br /><br /><br />
</td>
</tr>
</table>
</body>
</html>