发新贴  快速回复

新手,第一次上传代码,延时菜单的小练习,欢迎大家提出写的可以更好的地方,感觉写的有点繁琐了。

  novaln
2017-07-17 17:37

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

#navBox{position: relative; width: 480px; margin: 0 auto; height:30px;}

#nav{padding:0; height:30px; width: 480px;}

#nav li{list-style:none; float:left; background:#033566; padding: 0 40px; line-height: 40px; font-size: 15px; color: #fff;}

#nav li:hover{background:#ADFF2F;}

#shouye, #guanyuwomen, #zuopin, #boke{padding:0;width: 240px; position: absolute; top: 40px; }

#shouye{left: 0; display: none;}

#guanyuwomen{width: 380px; left: 20px; display: none;}

#zuopin{left: 180px; display: none;}

#boke{left:240px; display: none;}

#shouye li, #guanyuwomen li, #zuopin li, #boke li{list-style:none; float:left; background:#ADD8E6;  padding: 0 20px;  line-height: 30px; font-size: 15px; color: #fff;}

#shouye li:hover, #guanyuwomen li:hover, #zuopin li:hover, #boke li:hover{background:#C2C34B;}

</style>

<script>

window.onload = function(){

var navbox = document.getElementById('navBox');

var aUl = navbox.getElementsByTagName('ul');

var aLi = aUl[0].getElementsByTagName('li');

var timer = null;

var n = 0;

 

for(var i=0;i<aLi.length;i++){

aLi[i].index = i;

aLi[i].onmouseover = function(){

n = this.index+1;

for(var i=1;i<aUl.length;i++){

aUl[i].style.display = 'none';

}

clearTimeout(timer);

aUl[n].style.display = 'block';

};

aLi[i].onmouseout = function(){

timer = setTimeout(function(){

aUl[n].style.display = 'none';

},400)

};

}

 

for(var i=1;i<aUl.length;i++){

aUl[i].onmouseover = function(){

clearTimeout(timer);

this.style.display = 'block';

}

aUl[i].onmouseout = function(){

timer = setTimeout(function(){

aUl[n].style.display = 'none';

},400)

}

}

 

 

 

 

};

</script>

</head>

<body>

<div id="navBox">

<ul id="nav">

<li><a>首页</a></li>

<li><a>关于我们</a></li>

<li><a>作品</a></li>

<li><a>博客</a></li>

</ul>

 

<ul id="shouye">

<li><a>首页1</a></li>

<li><a>首页2</a></li>

<li><a>首页3</a></li>

</ul>

<ul id="guanyuwomen">

<li><a>关于我们1</a></li>

<li><a>关于我们2</a></li>

<li><a>关于我们3</a></li>

</ul>

<ul id="zuopin">

<li><a>作品1</a></li>

<li><a>作品2</a></li>

<li><a>作品3</a></li>

</ul>

<ul id="boke">

<li><a>博客1</a></li>

<li><a>博客2</a></li>

<li><a>博客3</a></li>

</ul>

</div>

</body>

</html>

 
尹巍

非常工整,没有多余的代码   

代码的精简,不仅仅是js的问题,更优雅的html排版,也能让js代码更精简

另外,把清除延时器放在代码块的第一行 首先执行会避免一些小问题

2017-07-19 16:32  回复本帖
 
novaln

尹巍 2017-07-19 16:32发表的内容:

非常工整,没有多余的代码   

代码的精简,不仅仅是js的问题,更优雅的html排版,也能让js代码更精简

另外,把清除延时器放在代码块的第一行 首先执行会避免一些小问题

非常感谢!

2017-07-19 16:51  回复本帖
登录 后才可以发表回复