菜單欄子菜單緩慢下拉回收效果
阿新 • • 發佈：2017-08-15
百度 div red play ul li char last tar html
前段時間一直想用這個功能，百度了好長時間也沒找到，正好最近學了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> <ahref="#">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); };
菜單欄子菜單緩慢下拉回收效果