<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>Document</title>
<style>
*{
margin:?0;
padding:?0;
list-style:?none;
font-size:?14px;
color:?gray;
}
.clearfix:after,.clearfix:before{
content:?"";
height:?0;
display:?block;
visibility:?hidden;
}
.clearfix:after{
clear:?both;
}
.nav{
overflow:?hidden;
width:?600px;
height:?200px;
margin:?1em?auto;
padding-left:?50px;
}
.classA{
position:?relative;
float:?left;
border-bottom:?4px?solid?#ff5d00;
}
.classA?.title{
background-color:?#efefef;
}
.classA?.title?li{
padding:?10px?10px;
margin:?0?10px;
cursor:?pointer;
}
.classB{
position:?absolute;
height:?0px;
overflow:?hidden;
background-color:?#ddd;
z-index:?-1;
}
.classB?li{
width:?103px;
height:?40px;
line-height:?40px;
text-align:?center;
box-sizing:border-box;
}
</style>
<script>
function?addLoadEvent?(func){
var?oldload?=?window.onload;
if(typeof?oldload?!=?"function"){
window.onload?=?func;
}else{
window.onload?=?function(){
oldload();
func();
}
}
}
addLoadEvent(secondClass);
function?secondClass?(){
var?title?=?document.getElementsByClassName("title");
var?classB?=?document.getElementsByClassName("classB")
var?elemtimer?=?null;
for(var?i=0,i_len=title.length;i<i_len;i++){
title[i].index?=?i;
//鼠標滑過的時候
title[i].onmouseover?=?function(){
clearInterval(elemtimer);
var?elem?=?classB[this.index];
//?clearInterval(elemtimer);
elemtimer?=?setInterval(function(){
var?dist?=?Math.ceil((160-elem.offsetHeight)/5);
elem.style.height?=?elem.offsetHeight+dist+"px";
if(elem.offsetHeight>=160){
clearInterval(elemtimer);
}
},20)
}
//鼠標移出的時候
title[i].onmouseout?=?function(){
document.title?=?this.index;
clearInterval(elemtimer);
var?elem?=?classB[this.index];
//?clearInterval(elemtimer);
elemtimer?=?setInterval(function(){
var?dist?=?Math.ceil((elem.offsetHeight)/5);
elem.style.height?=?elem.offsetHeight-dist+"px";
if(elem.offsetHeight<=0){
clearInterval(elemtimer);
}
},20)
}
}
}
</script>
</head>
<body>
<ul?class="nav?clearfix">
<li>
<ul>
<li>一級菜單0</li>
</ul>
<ul>
<li>二級菜單0-0</li>
<li>二級菜單0-1</li>
<li>二級菜單0-2</li>
<li>二級菜單0-3</li>
</ul>
</li>
<li>
<ul>
<li>一級菜單1</li>
</ul>
<ul>
<li>二級菜單1-0</li>
<li>二級菜單1-1</li>
<li>二級菜單1-2</li>
<li>二級菜單1-3</li>
</ul>
</li>
<li>
<ul>
<li>一級菜單2</li>
</ul>
<ul>
<li>二級菜單2-0</li>
<li>二級菜單2-1</li>
<li>二級菜單2-2</li>
<li>二級菜單2-3</li>
</ul>
</li>
<li>
<ul>
<li>一級菜單3</li>
</ul>
<ul>
<li>二級菜單3-0</li>
<li>二級菜單3-1</li>
<li>二級菜單3-2</li>
<li>二級菜單3-3</li>
</ul>
</li>
<li>
<ul>
<li>一級菜單4</li>
</ul>
<ul>
<li>二級菜單4-0</li>
<li>二級菜單4-1</li>
<li>二級菜單4-2</li>
<li>二級菜單4-3</li>
</ul>
</li>
</ul>
</body>
</html>
為什么在鼠標滑動的時候，onmouseout沒有生效。。。。。
盡吾志者
2015-07-09 19:01:46
