CSS样式特效.doc

JavaScript教案 长沙飞迅学术部: 傅志能第四章 CSS样式特效本章工作任务: 制作改变边框样式、按钮图片样式的特效 制作51job弹出层效果 制作“点卡”图片切换效果本章技能目标: 会使用style样式属性动态改变边框颜色 会使用className类名属性动态改变按钮背景图片 会使用display显示属性实现层或图片的隐藏/显示和切换特效本章重点: 样式特效的实现思路 会使用常见的borderColor、src、className、display、backImage样式属性本章难点: “点卡”中多个层切换的效果制作一、 本章授课思路 3分钟1. 回顾已学的CSS样式表2. 样式特效的实现思路3. 制作实现随鼠标移动改变边框颜色的效果4. 制作改变按钮背景图片的特效5. 课堂练习: 做个类似的改变按钮图片背景样式的特效.6. 层的显示/隐藏特效7. 课堂练习:做个51job层的隐藏/显示练习8. 图片的显示/隐藏特效: 点卡Tab效果切换二、 知识点内容讲解1. 首先简单回顾 10分钟(1). 先采用提问的方式引导学员回顾已学的样式三种样式: 行内样式 内嵌样式 外部样式 (2). 然后再分别演示三种样式代码的编写,注意: 它们之间的区别; (3). 熟悉一下常用的样式属性 2. 样式特效的实现思路:15分钟(1). 结合改变字号大小的示例: 字号.html，讲解样式特效的实现思路。 a、创建改变样式的JavaScript代码 this.style.fontSize=24px this.style.fontSize=14px b、利用鼠标相关事件调用JavaScript代码 onMouseOver=this.style.fontSize=24px” onMouseOut=this.style.fontSize=14px(2). 注意强调：脚本中的样式代码和样式表中的写法差别样式表：font-size脚本代码：fontSize所有查到样式属性, 直接将”-”去掉，然后第二个字符换为大写即可. (3). 课堂练习：制作右边栏浮动的广告图片 制作红色细边框的文本的框 补充案例中src属性，可以达到图片的切换效果 3. 制作改变按钮背景图片的特效15分钟 (1)、先演示改变样式backImage能否实现 (2)、分析失败原因及解决办法 (3)、演示必须使用className实现, 做一个成功的案例 (4)、课堂练习：类似于改变按钮的背景图4. 层的显示/隐藏特效 15分钟 (1) 先简单介绍display显示属性有哪些取值。none:隐藏 inline:一行内显示 block.按块显示 (2) 提出问题：如何实现“广告层.html”的效果? (3) 引导学员分析：具体的实现方法 (4) 举例说明：如何使用display属性显示(弹出)、隐藏(关闭)层 (5) 演示编写：如何解决“广告层.html”的效果 演示实例: 树形菜单 循环变换显示一张图片 5. 图片的显示/隐藏特效20分钟(1) 提出问题：如何实现图片切换特效?(2) 引导分析：解决办法是什么？(3) 演示：实现点卡图片切换特效(只实现游戏Tab的切换，手机的切换留给学员练习，参考imageTab1.html).(4) 课堂练习：让学员做手机的切换功能(5) 引出问题：这两段代码重得很多，能否进行简化?(6) 使用函数的参数来解决 三 总结 1. 样式表类型有三种：行内样式表、内嵌样式表(嵌入样式表)和外部样式表 2. 在JavaScript中，可以通过“获得的对象.style.fontSize”来改变获得的对象字体大小。 3. 在JavaScript中，可以通过“获得的对象.style.backgroundImage”来改变获得的对象的背景图片 4. 在HTML文档中，可以通过“获得的对象.style.display”来设置获得