1、CSS样式特效 第四章 回顾 详述 getElementById( )的主要功能 详述 getElementsByName( )的主要功能 简述制作浮动广告图片的实现思路 简述制作全选 /反选多个复选框的实现思路 本章任务 演示示例 2： 页面效果 演示示例 1： 页面效果 演示示例 3： 页面效果 制作 51job的弹出层效果 制作”点卡“图片切换的特效 制作改变边框样式、按钮图片样式的特效 本章目标 会使用 style样式属性动态改变边框颜色 会使用 className类名属性动态改变按钮背景图片 会使用 display显示属性实现层或图片的隐藏 /显示和切换特效 回顾已学的 CSS样式表
2、 -1 样式规则的语法是什么？用法有哪些？ 演示示例 4： 内嵌样式 演示示例 5： 内部样式 演示示例 6： 外部样式表 回顾已学的 CSS样式表 -2-1 回顾 HTML中讲过的 CSS样式表，常见的样式有哪些？ 常见 样式 文本属 性样式 背景属 性样式 不带下划 线的超连 接样式 细边 框样式 图片按 钮样式 回顾已学的 CSS样式表 -2-2 文本属性 说 明 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 背景属性 说 明 background-color 设置背景颜色
3、 background-image 设置背景图像 background-repeat 设置一个指定的图像如何被重复 回顾已学的 CSS样式表 -2-3 名称 说 明 不带下划线的超连接 A color: blue; text-decoration: none; A:hover color: red; 细边框样式 .boxBorder border-width:1px; border-style:solid; 图片按钮样式 .picButton background-image: url(images/back2.jpg); border: 0px; height: 23px; width: 8
4、2px; font-size: 14px; 回顾已学的 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“ 使用了style属性 样
5、式表：font-size 脚本代码：fontSize 演示示例 7： 改变字号大小的样式特效 小结 1 请编写如下图所示，实现随鼠标移入改变边框色的效果 练习代码 练习答案 鼠标移入边框颜色变为红色 制作改变按钮背景图片的特效 -1 如何实现如下图所示 ，按钮的图片背景效果？ 鼠标移入按钮背景变色 制作改变按钮背景图片的特效 -2 演示示例 8： 改变样式 backgroundImage演示 演示：通过改变样式 backImage能否实现？ onMouseOver=“this.style.backgroundImage=url(images/back2.jpg);“ 失败的原因：当鼠标移到按钮
6、上方时，除了图片要换以外，还应保留 border、 margin、 padding等样式。即使用多行代码 onmouseOver=“this.style.backImage=url(images/back2.jpg); this.style.boder=0;this.style.padding=0“; 解决办法：创建 mouseOver和 mouseOut两种类样式， 然后使用 className类属性进行切换 制作改变按钮背景图片的特效 -3 .mouseOverStyle background-image: url(images/back2.jpg); color:#CC0099; bor
7、der: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; 查看完整代码 定义样式 制作改变按钮背景图片的特效 -4 查看完整代码 利用鼠标相关事件调用样式代码 使用 className应用类样式 小结 2 编
8、写如下图所示，鼠标移入改变按钮背景图片的特效 练习代码 练习答案 按钮背景图片改变 层的显示 /隐藏特效 -1 显示属性 display 参数值 描述 block 默认值。按块显示，换行显示 . 用该值为对象之后添加新行 none 不显示 ，隐藏对象。与 visibility属性的 hidden值不同，其不为被隐藏对象保留其物理空间。 inline 按行显示，和其他元素同一行显示。 显示属性 display适用于所有 HTML标签，常用于层 DIV、图片 Img的显示和隐藏 层的显示 /隐藏特效 -2 如何实现如下图所示的页面上广告层的效果？ 显示广告层 隐藏广告层 层的显示 /隐藏特效 -3
9、 1、插入两个层，分别插入对应图片，注意设置两个层的 z-index属性 2、写脚本函数，当单击时同时关闭这两个层。 层的显示 /隐藏特效 -4 查看完整代码 “弹出、关闭层” #advLayer position:absolute; left:62px;top:44px;width:367px;height:194px;z-index:2; function closeMe( ) document.getElementById(“advLayer“).style.display=“none“; function showMe( ) document.getElementById(“advLa
10、yer“).style.display=“block“; 隐藏 id为advLayer的层 显示 id为advLayer的层 单击事件调用 loseMe( )方法 层的显示 /隐藏特效 -5 查看完整代码 #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; function closeMe( ) document.g
11、etElementById(“closeLayer“).style.display=“none“; document.getElementById(“advLayer“).style.display=“none“; 单击事件调用closeMe( )方法 获取层对象 显示属性 小结 3 编写如下图所示，层的显示隐藏特效 练习代码 练习答案 使用函数的参数，传递超链接的内容 修改按钮值： document.myform.placeButton.value=place 图片的显示 /隐藏特效 -1 如何实现如下图所示的图片切换特效？ 如何获取图片 Img对象？ 图片的显示 /隐藏特效 -2 1、可以
12、使用 DIV中插入图片来实现，但更简洁的办法是 直接使用图片的 display属性 2、访问图片 Img对象的方法： document.getElementById(“图片 ID“) 图片的显示 /隐藏特效 -3 function InitImage( ) document.getElementById(“gameTab2“).style.display=“none“; document.getElementById(“game“).style.display=“none“; document.getElementById(“mobileTab1“).style.display=“none“;
13、 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.displa
14、y=“none“; document.getElementById(“mobileTab1“).style.display=“block“; 隐藏 id为gameTab1的层 显示 id为gameTab2的层 点卡图片切换特效 查看完整代码 小结 4 编写如下图所示，图片的显示隐藏特效 练习代码 练习答案 提问：这两段代码重复很多，能否进行简化？ 图片的显示 /隐藏特效 -4 可以，使用有参函数来实现，实现代码如下： function InitImage( ) document.getElementById(“gameTab2“).style.display=“none“; document.
15、getElementById(“game“).style.display=“none“; document.getElementById(“mobileTab1“).style.display=“none“; function TabChange(show,hidden) document.getElementById(show ).style.display=“block“; document.getElementById(hidden ).style.display=“none“; document.getElementById(show+“Tab1“).style.display=“none“; document.getElementById(show+“Tab2“).style.display=“block“; document.getElementById(hidden+“Tab1“).style.display=“block“; document.getElementById(hidden+“Tab2“).style.display=“none“; 定义有参函数 同其他语言一样 “ “表示字符串连接 调用有参函数总结 请列举常用的样式属性？ 请简述样式特效的实现思路？ 请回答如何改变按钮背景图片的特效？ 请简述层的显示 /隐藏与图片的显示 /隐藏特效的异同？
