一个超简单的鼠标焦点显示二级菜单网页特效-JS特效-爱易网页

一个超简单的鼠标焦点显示二级菜单网页特效

日期：2014-05-18　浏览次数：20301 次

以下是程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<ul id='abc'>
<li>a
 <div>1</div>
</li>
<li>b
 <div>2</div>
</li>
<li>c
 <div>3</div>
</li>
</ul>
<script type="text/javascript">
window.onload=function(){
 var abc=document.getElementById('abc');
 
 var locLi=abc.getElementsByTagName('li');
 var locDiv=abc.getElementsByTagName('div');
 for(var i=0;i<locLi.length;i++){
    locLi[i].onmouseover=function(){
   displayDiv(this,'over');
   //alert(this);
    }
    locLi[i].onmouseout=function(){
   displayDiv(this,'out');
    }
 }
 
 function displayDiv(thisLi,enType){
  for(j=0;j<locDiv.length;j++){
   if(locDiv[j].parentNode==thisLi && enType=='over'){
    locDiv[j].style.display='block';
   }else{
    locDiv[j].style.display='none';
   }
  }
 }
}
</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

一个适合初学都的学习示例代码,鼠标焦点显示二级菜单..