任务:
- 制作鼠标指针移动特效
- 制作随鼠标滚动的菜单
目标
- 使用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>