JS第04章CSS样式.ppt

《JavaScript及网页特效制作》第四章 CSS样式特效 回顾 详述getElementById( )的主要功能 详述getElementsByName( )的主要功能 简述制作浮动广告图片的实现思路 简述制作全选/反选多个复选框的实现思路 预习检查 样式规则的语法是什么？用法有哪些 onMouseOver与onMouseOut的区别 inline 、block与none属性分别起什么作用 本章任务 本章目标 会使用style样式属性动态改变边框颜色 会使用className类名属性动态改变按钮背景图片 会使用display显示属性实现层或图片的隐藏/显示和切换特效 回顾已学的CSS样式表-1 样式表在网页中的作用. 对页面和页面元素的外观[风格样式]实施全面和精确的控制 与HTML分离,HTML只负责页面的结构和内容 样式表的语法:样式规则 选择器名称{属性名:属性值;名:值;……} 大括号内为样式定义:即一组格式 选择器用来说明此样式的作用范围 回顾已学的CSS样式表-2 选择器 HTML标记选择器 类选择器 ID选择器 锚伪类选择器 上下文选择器 回顾已学的CSS样式表-3 样式规则在哪里编写？ 回顾已学的CSS样式表-2-1 回顾HTML中讲过的CSS样式表，常见的样式有哪些？ 回顾已学的CSS样式表-3 制作如下图所示的“回顾样式.html”的页面效果 制作改变字体大小的样式特效 实现思路 1、创建改变样式的JavaScript代码 this.style.fontSize=24px this.style.fontSize=14px‘ 2、利用鼠标相关事件调用JavaScript代码 onMouseOver=this.style.fontSize=24px“ onMouseOut=this.style.fontSize=14px 小结 1 请编写如下图所示，实现随鼠标移入改变边框色的效果 制作改变按钮背景图片的特效-1 如何实现如下图所示 ，按钮的图片背景效果？ 制作改变按钮背景图片的特效-2 制作改变按钮背景图片的特效-3 制作改变按钮背景图片的特效-4 小结 2 编写如下图所示，鼠标移入改变按钮背景图片的特效 层的显示/隐藏特效-1 显示属性display 层的显示/隐藏特效-2 如何实现如下图所示的页面上广告层的效果？ 层的显示/隐藏特效-3 层的显示/隐藏特效-4 层的显示/隐藏特效-5 小结 3 编写如下图所示，层的显示隐藏特效 图片的显示/隐藏特效-1 如何实现如下图所示的图片切换特效？如何获取图片Img对象？ 图片的显示/隐藏特效-2 图片的显示/隐藏特效-3 小结 4 编写如下图所示，图片的显示隐藏特效 图片的显示/隐藏特效-4 可以，使用有参函数来实现，实现代码如下： 总结 请列举常用的样式属性？ 请简述样式特效的实现思路？ 请回答如何改变按钮背景图片的特效？ 请简述层的显示/隐藏与图片的显示/隐藏特效的异同？ * * 演示示例2：页面效果 演示示例1：页面效果 演示示例3：页面效果 制作51job的弹出层效果 制作”点卡“图片切换的特效 制作改变边框样式、按钮图片样式的特效 演示示例4：行内样式 演示示例5：内嵌样式 演示示例6：外部样式表 常见 样式 文本属 性样式 背景属 性样式 不带下划 线的超连 接样式 细边 框样式 图片按 钮样式 练习答案 练习代码 细边框样式 图片按钮样式 超链接样式 使用了style属性 样式表：font-size 脚本代码：fontSize 演示示例7：改变字号大小的样式特效 练习代码 练习答案 鼠标移入边框颜色变为红色 鼠标移入按钮背景变色 演示示例8：改变样式backgroundImage演示 演示：通过改变样式backImage能否实现？ onMouseOver=this.style.backgroundImage=url(images/back2.jpg); 失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留 border、margin、 padding等样式。即使用多行代码 onmouseOver=this.style.backImage=‘url(images/back2.jpg); this.style.boder=0;this.style.padding=0......; 解决办法：创建mouseOver和mouseOut两种类样式， 然后使用className类属性进行切换 STYLE type=text/css .mouseOverStyle{ background-image: url(