1、制作网页高级特效,温州职业中专 冯晨笑,本节课需要实现的,本节课需要学习和实现的，是比较复杂但非常实用的菜单类特效。,如何实现？原理篇,首先，要学习一下层切换相关的知识。层切换的原理是什么？1、层切换首先第一步自然是，触发相应的事件这个事件可以是鼠标单击事件，也可以是鼠标移入事件； 2、执行相应事件中的代码； 3、如果有的话，判断并执行另一种相反情况下的事件代码（例如鼠标移出事件，或另一个单击事件）。,如何实现？理论篇,但和普通的导航高亮效果不同，显然这种菜单特效更为的复杂。复杂在哪？就复杂在还需要精确的判断出被触发的元素，以及相关联的元素。这时候需要用到JS里最重要的一种取值工具getEle
2、mentById。注意，大小写！,如何判断一个元素自身？,和人一样，所有的HTML元素都可以拥有自己的一个独一无二的名字（当然是在限定的场合下，在更大的场合下很可能会存在重名）。而给HTML元素这种命名的方法就是，给HTML标签添加一个ID属性。例如：学校简介组织机构处室职责学校荣誉领导关怀这时候，这个导航就已经有了一个独一无二的名字，叫做nav。,如何判断一个元素自身？,给HTML元素赋予了一个ID之后，就可以通过JS或是CSS快速的定位到它了，CSS里是使用#符号，JS中就是之前提到的getElementById。例如，要提取HTML中ID为test的HTML元素的话，就可以这样写：doc
3、ument. getElementById(“test”);,取到值了之后，如何赋值？,变量的声明、变量的赋值是计算机程序中最基本的两个操作。所以，取到了值之后，不是马上就可以用的，必须要先声明一个变量，然后赋值。那么，JS如何声明和赋值？JS是通过var关键字，或是干脆就不用，直接写变量名即可。也就是说，下面这两种写法，多数情况下是等价的：Var Test = document. getElementById(“test”);Test = document. getElementById(“test”);,如何切换层？,层的切换，说白了，在原理上就是某一个元素的显示和隐藏。当一个元素被隐藏，
4、而另一个元素代替的显示出来，或是相反这种变化就可以叫做切换。因此，层切换的核心知识就是如何显示或隐藏一个HTML元素要注意了，JS虽然近乎万能的，但这个它的确做不到。因为JS只是脚本语言，它控制行为，但它控制不了元素的样式显示一个元素是一种动作，但一个元素的显示与否这种状态，是一种外观表现。这时候就需要用到样式表现语言CSS了。CSS的语法这里就先不谈，只谈关键的，就是一个元素显示和隐藏相关的代码（当然下面是CSS写在了JS里的写法，而不是CSS正统的写法）。Style.display = “block”; /显示 Style.display = “none”; /隐藏,于是，就完成了,综合上
5、面所有知识，一个层切换的代码，就可以出来了（部分）。ul list-style:none;#nav_main li float:left; width:100px; height:30px; line-height:30px; text-align:center; border:1px solid red; margin:0 1px;#nav_main li:hover cursor:pointer; background:#00f; color:#F00;#nav_main position:relative;#nav_sub ul display:none; clear:both;function show(obj)var item = document.getElementById(obj);item.style.display = “block“; function hide(obj)var item = document.getElementById(obj);item.style.display = “none“; ,于是，就完成了,综合上面所有知识，一个层切换的代码，就可以出来了。首页学校概况学校简介1组织机构1处室职责1学校荣誉1领导关怀1,练习,参考本节课的PPT，将练习文件夹中的index.html进行代码补完，实现层切换效果。,
