js-鼠标经过显示下拉菜单

来源：互联网发布：vscode for xp 编辑：程序博客网时间：2024/05/29 09:07

在网页中，下拉菜单的样式非常多，这里介绍一下如何用js代码来控制

分析：1、效果：控制样式display的显示和隐藏

2、事件：当鼠标经过时onmouseover和当鼠标移出时onmouseout

3、获取元素：DOM文档对象模型：赋予js控制结构和样式的能力。document.getElementById（）；获取元素通过 id；

如上图所示，鼠标经过一级菜单的时候，二级下拉菜单显示出来：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>二级下拉菜单</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#one>li{
width: 80px;
height: 40px;
margin: 2px;
background: #d8d8d8;
float: left;
text-align: center;
line-height: 40px;
}
.two{
width: 80px;
height: 160px;
background: #666;
display: none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById('one');
var aLi=oUl.children;//获取第一级菜单的四个子标签
for (i=0;i<aLi.length;i++) {
aLi[i].onmouseover=function(){
this.children[0].style.display='block';
};
aLi[i].onmouseout=function(){
this.children[0].style.display='none';
};
}
};
</script>
</head>
<body>
<ul id="one">
<li class="one_list">一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="one_list">一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="one_list">一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="one_list">一级菜单
<ul class="two">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>

以上代码还可以整理一下，实现各种炫酷的下拉菜单，
1、通过控制二级下拉菜单的高度从0到它本身的height（还可以加上缓冲运动的效果和渐隐渐现的效果）；
2、通过控制二级下拉菜单的宽度从0到它本身的width（还可以加上缓冲运动的效果和渐隐渐现的效果）；
3、通过控制二级下拉菜单的位置从频幕左侧运动过来或从屏幕上方往下运动；
4、通过控制二级下拉菜单的透明度opacity的值从0到1（即渐隐渐现）
等等；
.......
.......

0 0