第九周任务

第九周

1：
实训1.改变按钮背景图片
训练要点
（1）使用onmouseover和onmouseout事件。
（2）使用className属性。
需求说明
页面初始运行效果如图1所示。当鼠标移到“现在就注册”按钮时的页面效果如图2所示。

图1初始运行效果图 图2 改变按钮背景图片效果
实现思路及步骤
（1） 为按钮添加事件onmouseover和onmouseout，
（2） 在onmouseover事件中更改按钮样式为“mouseOverStyle”，在onmouseout事件中恢复按钮的样式为“mouseOutStyle”。
mouseOverStyle和mouseOutStyle样式参考代码如下所示。
.mouseOverStyle{
background-image: url(images/btn_over.gif);
color:#CC0099;
border:0px;
margin:0px;
padding:0px;
height:35px;
width: 130px;
font-size: 13px;
}
.mouseOutStyle{
background-image: url(images/btn_out.gif);
color:#0000FF;
border:0px;
margin:0px;
padding:0px;
height:35px;
width: 130px;
font-size: 13px;
}

实训2 改变图片边框样式。
训练要点
（1）使用onmouseover和onmouseout事件。
（2）使用className属性。
需求说明
页面初始运行效果如图3 所示。当鼠标移到图片时的页面效果如图4所示。

图3初始运行效果图 图4 改变图片边框效果
实现思路及步骤
（1） 设置每幅图片的样式为类选择器“out”，并添加onmouseover和onmouseout事件。
（2） 在每幅图片的onmouseover事件中更改图片的样式为“over”，在onmouseout事件中恢复图片的样式为“out”，关键代码如下所示。
“out”和“over”样式参考代码如下所示。
.out{border:solid 1px #eeeeee;}
.over{border:solid 2px #F60;}
实训3 制作带关闭按钮的滚动广告。
训练要点
（1）使用getElementById()获得层对象。
（2）使用currentStyle或getComputedStyle()获得层的位置
（3）使用display属性隐藏层
（4）使用scrollTop获取滚动条滚动的距离
需求说明
在如图7 所示的页面中有一个图片和一个关闭按钮。当滚动条向下或向右移动时，图片和关闭按钮随滚动条移动，相对于浏览器的位置固定。单击关闭按钮，页面中的图片和关闭按钮不显示。

图7 随滚动条滚动的图片
实现思路及步骤
（1）在页面中插入两个层，把图片和关闭按钮分别插入到两个层中，并且设置关闭按钮在图片层之上。
（2）在关闭按钮层上设置鼠标单击事件，当鼠标单击时调用隐藏两个层的函数，使用style对象的display属性来关闭按钮。
（3）在JavaScript中设置六个全局变量：closeTop、closeLeft、floatTop、floatLeft、closeObject、floatObject，分别表示关闭按钮、图片所在层的初始位置和两个层对象。
（4）设置两个函数place()和roll()，place()用来获取两个层的初始位置，roll()设置两个层随滚动条滚动。
（5）在place()函数中分别根据IE浏览器和Firefox浏览器获取层的初始位置。
（6）在roll()函数中设置两个层随滚动条滚动。
（7）当页面加载时调用函数place()，当滚动条滚动时调用函数roll()。

2:

3、

4、