1.效果图
2.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="miaov_style.css">
<script>
window.onload = function(){
var aA = getByClassName(document, 'normal');
var aSpan = getByClassName(document, 'float_layer');
var timer = null;
for(var i = 0; i < aA.length; i++){
aA[i].index = i; //给按钮加索引,这样与其他元素形成一个对应
aA[i].onmouseover = function(){
for(var i = 0; i < aSpan.length ; i++){ //目的是其他3个隐藏
aSpan[i].style.display = 'none';
}
aSpan[this.index].style.display = 'block';//当前的显示
clearInterval(timer);//从span移回到标题也不隐藏span
};
aA[i].onmouseout = function(){ //标题鼠标移开,对应的下面的内容消失,但不能立即消失,否则鼠标永远也倒不了下面的内容上了
var This = this;//此刻this 是指 aA[i]
timer = window.setTimeout(function(){
aSpan[This.index].style.display = 'none';
//aSpan[this.index].style.display = 'none';//不能写this,此刻this指向的是window
},1000);
}
aSpan[i].onmouseover = function(){
clearInterval(timer);//让定时器失效,span不隐藏
}
aSpan[i].onmouseout = function(){
var This = this;
timer = setTimeout(function(){
This.style.display = 'none'; //This == aSpan[i]
},500);
}
}
function getByClassName(parent, className){
var aTag = parent.getElementsByTagName("*");
var result = [];
var reg = new RegExp('\b'+ className + '\b','i');
for(var i = 0; i < aTag.length; i++){
if(reg.test(aTag[i].className)){
result.push(aTag[i]);
}
}
return result;
}
}
</script>
</head>
<body>
<div id="nav">
<div class="adorn1"></div>
<div class="adorn2"></div>
<ul>
<li>
<a class="normal" href="http://www.miaov.com"><span>首页</span></a>
<span class="float_layer w1 pos1">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>最近更新</span></a>
<a href="http://www.miaov.com"><span>活动</span></a>
<a href="http://www.miaov.com"><span>报名试听</span></a>
<a href="http://www.miaov.com"><span>学员反馈</span></a>
</span>
</li>
<li class="line">
<a class="normal" href="http://www.miaov.com"><span>关于我们</span></a>
<span class="float_layer w2 pos2">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>妙味讲师</span></a>
<a href="http://www.miaov.com"><span>培训方式</span></a>
<a href="http://www.miaov.com"><span>培训理念</span></a>
<a href="http://www.miaov.com"><span>联系我们</span></a>
</span>
</li>
<li class="line">
<a class="normal" href="http://www.miaov.com"><span>作品</span></a>
<span class="float_layer w3 pos3">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>般固</span></a>
<a href="http://www.miaov.com"><span>MATRIX</span></a>
<a href="http://www.miaov.com"><span>留学e网</span></a>
<a href="http://www.miaov.com"><span>ECMall</span></a>
</span>
</li>
<li class="line">
<a class="normal" href="http://www.miaov.com"><span>博客</span></a>
<span class="float_layer w4 pos4">
<span class="arrows"></span>
<span class="decorate1"></span>
<span class="decorate2"></span>
<a href="http://www.miaov.com"><span>JS教程</span></a>
<a href="http://www.miaov.com"><span>弹出层效果</span></a>
<a href="http://www.miaov.com"><span>3D球面标签云</span></a>
<a href="http://www.miaov.com"><span>Window计算器</span></a>
</span>
</li>
</ul>
<p><a href="http://www.miaov.com">>>更多</a></p>
</div>
</body>
</html>