菜单栏子菜单缓慢下拉回收效果
Posted 让自己不再小小的
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了菜单栏子菜单缓慢下拉回收效果相关的知识，希望对你有一定的参考价值。
前段时间一直想用这个功能，百度了好长时间也没找到，正好最近学了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); };
以上是关于菜单栏子菜单缓慢下拉回收效果的主要内容，如果未能解决你的问题，请参考以下文章