CSS样式特效_css样式设计
CSS样式特效由刀豆文库小编整理，希望给你工作、学习、生活带来方便，猜你可能喜欢“css样式设计”。
JavaScript教案
长沙飞迅学术部: 傅志能
第四章
CSS样式特效
本章工作任务: 制作改变边框样式、按钮图片样式的特效 制作51job弹出层效果
制作“点卡”图片切换效果
本章技能目标: 会使用style样式属性动态改变边框颜色
会使用claName类名属性动态改变按钮背景图片
会使用display显示属性实现层或图片的隐藏/显示和切换特效
本章重点: 样式特效的实现思路
会使用常见的borderColor、src、claName、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'“ JavaScript教案
长沙飞迅学术部: 傅志能
(2).注意强调：脚本中的样式代码和样式表中的写法差别
样式表：font-size 脚本代码：fontSize 所有查到样式属性, 直接将”-”去掉，然后第二个字符换为大写即可.(3).课堂练习：制作右边栏浮动的广告图片
制作红色细边框的文本的框
补充案例中src属性，可以达到图片的切换效果
3.制作改变按钮背景图片的特效[15分钟]
(1)、先演示改变样式backImage能否实现
(2)、分析失败原因及解决办法
(3)、演示必须使用claName实现, 做一个成功的案例
(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”来设置获得的对象(任何页面元素)是显示还是隐藏
5.这一章根据班来定,如果这个班对DIV+CSS布局比较差的话,可以给学生补一次有关页面布局的课
JavaScript教案
长沙飞迅学术部: 傅志能
四 布置作业
循环变换显示一张图片
