任務：
- 製作鼠標指針移動特效
- 製作隨鼠標滾動的菜單
目標
- 使用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>