HTML样式特效、层显示隐藏

Hands-On实训教程系列CSS样式特效第八章Hands-On实训教程系列回顾详述getElementById()的主要功能详述getElementsByName()的主要功能简述制作浮动广告图片的实现思路简述制作全选/反选多个复选框的实现思路Hands-On实训教程系列本章任务演示示例2：页面效果演示示例1：页面效果演示示例3：页面效果制作51job的弹出层效果制作”点卡“图片切换的特效制作改变边框样式、按钮图片样式的特效Hands-On实训教程系列本章目标会使用style样式属性动态改变边框颜色会使用className类名属性动态改变按钮背景图片会使用display显示属性实现层或图片的隐藏/显示和切换特效Hands-On实训教程系列回顾已学的CSS样式表-1样式规则的语法是什么？用法有哪些？演示示例4：行内样式演示示例5：内嵌样式演示示例6：外部样式表Hands-On实训教程系列回顾已学的CSS样式表-2-1回顾HTML中讲过的CSS样式表，常见的样式有哪些？常见样式文本属性样式背景属性样式不带下划线的超连接样式细边框样式图片按钮样式Hands-On实训教程系列回顾已学的CSS样式表-2-2文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复Hands-On实训教程系列回顾已学的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;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;}Hands-On实训教程系列回顾已学的CSS样式表-3制作如下图所示的“回顾样式.html”的页面效果练习答案练习代码细边框样式图片按钮样式超链接样式Hands-On实训教程系列制作改变字体大小的样式特效实现思路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：改变字号大小的样式特效Hands-On实训教程系列小结1请编写如下图所示，实现随鼠标移入改变边框色的效果练习代码练习答案鼠标移入边框颜色变为红色Hands-On实训教程系列制作改变按钮背景图片的特效-1如何实现如下图所示，按钮的图片背景效果？鼠标移入按钮背景变色Hands-On实训教程系列制作改变按钮背景图片的特效-2演示示例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类属性进行切换Hands-On实训教程系列制作改变按钮背景图片的特效-3STYLEtype=text/css.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;}/STYLE查看完整代码定义样式Hands-On实训教程系列制作改变按钮背景图片的特效-4TRTDheight=30colSpan=2align=centerINPUTname=Buttontype=buttonclass=mouseOutStylevalue=登录onMouseOver=this.className='mouseOverStyle'onMouseOut=this.className='mouseOutStyle'/TD/TR……查看完整代码利用鼠标相关事件调用样式代码使用className应用类样式Hands-On实训教程系列小结2编写如下图所示，鼠标移入改变按钮背景图片的特效练习代码练习答案按钮背景图片改变Hands-On实训教程系列层的显示/隐藏特效-1显示属性display参数值描述block默认值。按块显示，换行显示.用该值为对象之后添加新行none不显示，隐藏对象。与visibility属性的hidden值不同，其不为被隐藏对象保留其物理空间。inline按行显示，和其他元素同一行显示。显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏Hands-On实训教程系列层的显示/隐藏特效-2如何实现如下图所示的页面上广告层的效果？显示广告层隐藏广告层Hands-On实训教程系列层的显示/隐藏特效-31、插入两个层，分别插入对应图片，注意设置两个层的z-index属性2、写脚本函数，当单击时同时关闭这两个层。Hands-On实训教程系列层的显示/隐藏特效-4查看完整代码“弹出、关闭层”STYLEtype=text/css#advLayer{position:absolute;left:62px;top:44px;width:367px;height:194px;z-index:2;}/STYLESCRIPTlanguage=javascriptfunctioncloseMe(){document.getElementById(advLayer).style.display=none;}functionshowMe(){document.getElementById(advLayer).style.display=block;}/SCRIPT……INPUTname=placeButtontype=buttonvalue=关闭层onClick=closeMe()INPUTname=placeButton2type=buttonvalue=弹出层onClick=showMe()……隐藏id为advLayer的层显示id为advLayer的层单击事件调用closeMe()方法Hands-On实训教程系列层的显示/隐藏特效-5查看完整代码STYLEtype=text/css#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;}/STYLESCRIPTlanguage=javascriptfunctioncloseMe(){document.getElementById(closeLayer).style.display=none;document.getElementById(advLayer).style.display=none;}/SCRIPT……DIVid=advLayerIMGsrc=images/adv.jpgwidth=110/DIVDIVid=closeLayeronClick=closeMe()IMGsrc=images/closePic.jpgwidth=42height=14/DIV……单击事件调用closeMe()方法获取层对象显示属性Hands-On实训教程系列小结3编写如下图所示，层的显示隐藏特效练习代码练习答案使用函数的参数，传递超链接的内容修改按钮值：document.myform.placeButton.value=placeHands-On实训教程系列图片的显示/隐藏特效-1如何实现如下图所示的图片切换特效？如何获取图片Img对象？Hands-On实训教程系列图片的显示/隐藏特效-21、可以使用DIV中插入图片来实现，但更简洁的办法是直接使用图片的display属性2、访问图片Img对象的方法：document.getElementById(图片ID)Hands-On实训教程系列图片的显示/隐藏特效-3SCRIPTlanguage=javascriptfunctionInitImage(){document.getElementById(gameTab2).style.display=none;document.getElementById(game).style.display=none;document.getElementById(mobileTab1).style.display=none;}functionshowGame(){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;}/SCRIPT……TDIMGid=gameTab1src=images/gameTab1.jpgwidth=83height=47onMouseOver=showGame()IMGid=gameTab2src=images/gameTab2.jpgwidth=83height=49/TDTDIMGid=mobileTab1src=images/mobileTab1.jpgwidth=81height=49IMGid=mobileTab2src=images/mobileTab2.jpgwidth=82height=47/TD……隐藏id为gameTab1的层显示id为gameTab2的层点卡图片切换特效查看完整代码Hands-On实训教程系列小结4编写如下图所示