由于种种原因，部分内容被隐藏，请大家原谅。
如果有什么问题，可以与我联系，我会尽快解答。
如果你觉得这篇文章对你有用，请回贴，谢谢。
授课教师：牟勇
课时：100分钟
l 本章技能目标
n 会使用style样式属性动态改变边框颜色
n 会使用classname类名属性动态改变按钮背景图片
n 会使用display显示属性实现层或图片的隐藏/显示和切换特效
l 本章重点
n样式特效的实现思路
n会使用常见的borderColor、src、className、display、backImage样式属性
l 本章难点
n点卡中多个层切换的效果制作
l 本章工作任务
n制作改变边框样式，按钮图片样式的特效
n制作51job的弹出层效果
n制作“点卡”图片切换的特效
l 整章授课思路
n先演示本章要实现的效果页面，然后逐一告诉学员如何做，穿插讲解理论。
n回顾已学的CSS样式表
n样式特效的实现思路
n课堂练习：实现随鼠标移动改变边框颜色的效果
n制作改变按钮背景图片的特效
n课堂练习：做个类似的改变按钮图片背景样式的特效
n层的显示/隐藏特效
n课堂练习：做个51job层的隐藏/显示练习
n图片的显示/隐藏特效：点卡Tab效果切换
n让学员做课堂练习时，必须提供已做好的静态页面，让学员编写JS脚本部分即可。
详述getElementById( )的主要功能
详述getElementsByName( )的主要功能
简述制作浮动广告图片的实现思路
简述制作全选/反选多个复选框的实现思路
样式规则的语法是什么？用法有哪些
onMouseOver与onMouseOut的区别
inline 、block与none属性分别起什么作用
问题：样式表的语法规则是什么，用法有哪些？
答案：演示案例，并说明语法规则和用法。
问题：回顾HTML中讲过的CSS样式表，常见的样式有哪些？
答案：文本样式，背景样式，超链接样式，细边框样式，图片按钮样式
|
属性
|
说明
|
|
font-size
|
字体大小
|
|
font-family
|
字体名称
|
|
font-style
|
字体样式
normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
oblique : 倾斜的字体
|
|
color
|
颜色
|
|
text-align
|
文本对齐
|
|
background-color
|
背景颜色
|
|
background-image
|
背景图片
|
|
background-repeat
|
指定背景图片如何重叠
|
现场编程：制作如下图所示的“回顾样式.html”的页面效果
图片样式，细边框样式，超链接样式
样式特效的实现思路[15分钟]
引入：通过上面的复习，我们对CSS有了一些了解。CSS可以改变样式，使我们可以做出很炫的网页，可是，样式表毕竟还是静态的，我们能不能随着用户的操作，而动态的改变HTML元素的样式呢？这时，我们需要使用JavaScript来动态改变HTML元素的样式。应该怎么做呢？我们先来看一个示例。
结合改变字号大小的示例：字号.html，讲解样式特效的实现思路
1.创建改变样式的JavaScript代码
2.利用鼠标相关事件调用JavaScript代码
小结1：
实现随鼠标移入改变边框色的效果
教员出示练习代码，由学员完成填空
问题：如何实现改变按钮背景图片的特效？
演示：通过backgroundImage来改变背景图片(失败作品)。
分析：失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留 border、margin、 padding等样式。即使用多行代码
onmouseOver="this.style.backImage=‘url(images/back2.jpg)';
this.style.boder=0;this.style.padding=0
此外，还需要写onmouseout，在鼠标离开时将按钮改回原来的样式。
完整解决方案：
样式表
<STYLE type="text/css" >
.mouseOverStyle{
background-image: url(images/back2.jpg);
color:#CC0099;
border:0px;
margin:0px;
padding:0px;
height:23px;width: 82px;
font-size: 14px; }
.mouseOutStyle{
background-image: url(images/back1.jpg);
color:#0000FF; border:0px; margin:0px;
padding:0px;height:23px; width:82px;
font-size: 14px; }
</STYLE>
|
利用鼠标相关事件调用样式代码
<TR>
<TD height="30" colSpan=2 align=center>
<INPUT name=Button type="button" class="mouseOutStyle" value=" 登 录 " onMouseOver="this.className='mouseOverStyle'" onMouseOut="this.className='mouseOutStyle'">
</TD>
</TR>
|
小结2：
鼠标移入改变按钮背景图片的特效
教员出示练习代码，学员进行代码填空。
display的值(显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏)
|
属性
|
说明
|
|
block
|
默认值。按块显示，换行显示，用该值为对象之后添加新行
|
|
none
|
不显示 ，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。
|
|
inline
|
按行显示，和其他元素同一行显示。
|
问题：如何实现隐藏广告层的效果？
分析：
1、插入两个层，分别插入对应图片，注意设置两个层的z-index属性
2、写脚本函数，当单击时同时关闭这两个层。
原型代码：
<STYLE type="text/css" >
#advLayer { position:absolute;
left:62px;top:44px;width:367px;height:194px;z-index:2;}
</STYLE>
<SCRIPT language="javascript" >
function closeMe( )
{document.getElementById("advLayer").style.display="none";}
function showMe( )
{document.getElementById("advLayer").style.display="block";}
</SCRIPT>
……
<INPUT name="placeButton" type="button" value=" 关闭层 " onClick=" closeMe( )">
<INPUT name="placeButton2" type="button" value=" 弹出层 " onClick=" showMe( )">
|
完整示例：
<STYLE type="text/css">
#advLayer {
position:absolute;left:5px;top:101px;width:100px;height:224px;z-index:1;}
#closeLayer {
position:absolute;left:70px;top:329px;width:35px;height:22px;z-index:2;}
</STYLE>
<SCRIPT language="javascript" >
function closeMe( ){
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none"; }
</SCRIPT>
……
<DIV id="advLayer"><IMG src="images/adv.jpg" width="110" ></DIV>
<DIV id="closeLayer" onClick="closeMe( )"><IMG src="images/closePic.jpg" width="42" height="14"></DIV>
|
小结3：层的显示隐藏特效
教员出示练习代码，学员进行代码填空
问题：如何实现如下图所示的图片切换特效？如何获取图片Img对象？
分析：
1、可以使用DIV中插入图片来实现，但更简洁的办法是直接使用图片的display属性
2、访问图片Img对象的方法：document.getElementById("图片ID")
<SCRIPT language="javascript">
function InitImage( ){
document.getElementById("gameTab2").style.display="none";
document.getElementById("game").style.display="none";
document.getElementById("mobileTab1").style.display="none"; }
function showGame( ){
document.getElementById("gameTab1").style.display="none";
document.getElementById("gameTab2").style.display="block";
document.getElementById("game").style.display="block";
document.getElementById("mobile").style.display="none";
document.getElementById("mobileTab2").style.display="none";
document.getElementById("mobileTab1").style.display="block"; }
</SCRIPT>
……
<TD><IMG id="gameTab1" src="images/gameTab1.jpg" width="83" height="47" onMouseOver="showGame()"><IMG id="gameTab2" src="images/gameTab2.jpg" width="83" height="49"></TD>
<TD><IMG id="mobileTab1" src="images/mobileTab1.jpg" width="81" height="49" ><IMG id="mobileTab2" src="images/mobileTab2.jpg" width="82" height="47"></TD> ……
|
小结4：
教员出示练习代码，由学员进行代码填空
请列举常用的样式属性？
请简述样式特效的实现思路？
请回答如何改变按钮背景图片的特效？
请简述层的显示/隐藏与图片的显示/隐藏特效的异同？
DOM的概念
getElementById()的使用
getElementsByName()的使用
display属性的常量值(不需要全部讲)
暂无
习题1：115页至116页选择题
习题2：116页第1,2,3题
习题3：预习第五章，试做课后的选择题发表于 @ 2008年04月30日 10:20:10|评论(loading...)|编辑