1、第八章,JavaScript 中的CSS样式特效,2,样式优先权,行内样式表内嵌样式表外部样式表 选择符优先：idclass标签选择符 #layout background-color:bule .mylayout background-color:red div background-color:black div#new background-color:yellow ,3,回顾已学的CSS样式表-2-2,4,回顾已学的CSS样式表-2-3,5,小结 1,请编写如下图所示，实现随鼠标移入改变边框色的效果,练习代码,练习答案,鼠标移入边框颜色变为红色,6,制作改变按钮背景图片的特效-1,如何
2、实现如下图所示 ，按钮的图片背景效果？,鼠标移入按钮背景变色,7,制作改变按钮背景图片的特效-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.bo
3、der=0;this.style.padding=0“;,解决办法：创建mouseOver和mouseOut两种类样式， 然后使用className类属性进行切换,8,制作改变按钮背景图片的特效-3, .mouseOverStylebackground-image: url(images/back2.jpg);color:#CC0099; border:0px;margin:0px;padding:0px;height:23px;width: 82px;font-size: 14px; .mouseOutStylebackground-image: url(images/back1.jpg);
4、color:#0000FF; border:0px; margin:0px;padding:0px;height:23px; width:82px;font-size: 14px; ,查看完整代码,定义样式,9,制作改变按钮背景图片的特效-4,查看完整代码,利用鼠标相关事件调用样式代码,使用className应用类样式,10,层的显示/隐藏特效-1,显示属性display,显示属性display适用于所有HTML标签，常用于层DIV、图片Img的显示和隐藏,11,小结 3,编写如下图所示，层的显示隐藏特效,练习代码,练习答案,使用函数的参数，传递超链接的内容,修改按钮值：document.my
5、form.placeButton.value=place,12,图片的显示/隐藏特效-1,如何实现如下图所示的图片切换特效？ 如何获取图片Img对象？,13,图片的显示/隐藏特效-2,1、可以使用DIV中插入图片来实现，但更简洁的办法是直接使用图片的display属性,2、访问图片Img对象的方法：document.getElementById(“图片ID“),14,图片的显示/隐藏特效-3, function InitImage( )document.getElementById(“gameTab2“).style.display=“none“;document.getElementById
6、(“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.getElementB
7、yId(“mobile“).style.display=“none“;document.getElementById(“mobileTab2“).style.display=“none“;document.getElementById(“mobileTab1“).style.display=“block“; ,隐藏id为gameTab1的层,显示id为gameTab2的层,点卡图片切换特效,查看完整代码,15,小结 4,编写如下图所示，图片的显示隐藏特效,练习代码,练习答案,提问：这两段代码重复很多，能否进行简化？,16,图片的显示/隐藏特效-4,可以，使用有参函数来实现，实现代码如下：, f
8、unction 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“; ,定义有参函数,同其他语言一样“表示字符串连接,调用有参函数,
