JS4 - CSS样式特效.ppt

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