前段时间一直想用这个功能，百度了好长时间也没找到，正好最近学了js，索性自己来写一下，纯js实现，可能写的也有瑕疵，欢迎指教
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="StyleSheet2.css" rel="stylesheet" />
<script src="JavaScript2.js"></script>
</head>
<body>
<div id="menu">
<ul>
<li class="main">
<a href="#">1</a>
<ul>
<li>
<a href="#">a</a>
</li>
<li>
<a href="#">b</a>
</li>
<li>
<a href="#">c</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">2</a>
<ul>
<li>
<a href="#">d</a>
</li>
<li>
<a href="#">e</a>
</li>
<li>
<a href="#">f</a>
</li>
</ul>
</li>
<li class="main">
<a href="#">3</a>
<ul>
<li>
<a href="#">g</a>
</li>
<li>
<a href="#">h</a>
</li>
<li>
<a href="#">i</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
外部样式：
body {
margin: 0px;
}
#menu{
width: 302px;
height: 35px;
margin: 20px auto;
background: red;
}
#menu ul{
margin: 0px;
padding: 0px;
list-style: none;
}
#menu ul li{
float: left;
width: 100px;
line-height: 35px;
text-align: center;
border-right: 1px solid #ccc;
}
#menu ul li:last-child{
border-right: none;
}
#menu ul li a{
text-decoration: none;
font-size: 12px;
width: 100px;
height: 35px;
display: block;
}
#menu .main ul{
display: none;
overflow: hidden;
height: 0px;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu .main ul li{
background: #ccc;
width: 100px;
height: 35px;
border-bottom: 1px solid black;
}
js部分：
window.onload = function () {
var fli = document.getElementsByClassName(‘main‘);
//alert(fli.length);
for (var i=0; i<fli.length; i++) {
var target = fli[i].getElementsByTagName(‘a‘)[0];
var t = fli[i].getElementsByTagName(‘ul‘)[0];
var li = t.getElementsByTagName(‘li‘);
target.yidong = t;
target.len = li.length;
target.timer = null;
target.onmouseover = function () {
this.yidong.style.display = ‘block‘;
move(this.len*(35+1), this, this.yidong);
};
target.onmouseout = function () {
move(0, this, this.yidong);
//this.yidong.style.display = ‘none‘;
};
}
};
function move(x, obj, t) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var speed = (x - t.offsetHeight) / 26;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (t.offsetHeight == x) {
clearInterval(obj.timer);
}
else {
t.style.height = t.offsetHeight + speed + ‘px‘;
}
}, 30);
};
时间： 2024-11-06 00:50:46