正文

第十五篇 JS 移入移出事件 模拟一个二级菜单

IP云
IP云V管理员/7 阅读
06/21
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

JS 移入移出事件 模拟一个二级菜单

 
老师演示一个特别简单二级菜单，同学们除了学习JS，还要注意它的元素和CSS样式。
这节课介绍的是JS鼠标移入、移出事件：onmouseover是移入事件，onmouseout是移出事件。当然还有其他的事件效果，这里就先不说明了。
先直接上一段代码：
 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>二级菜单，鼠标移出和移入事件</title>
<style>
ul li{
/*取消 li前面的黑点*/
list-style:none;
}
#er{
/*让二级ul移动到 一级ul下面去*/
margin:5px 0 0 -40px;
/*因为做二级菜单效果，它先是隐藏的*/
display: none;
}
</style>
</head>
<body>
<div onclick="dianji()">点击我</div>
<ul onmouseover="yiru()" onmouseout="yichu()">
<li>我的</li>
<li>
<ul id="er">
<li>个人资料</li>
<li>密码安全</li>
</ul>
</li>
</ul>
<br/><br/><br/><br/>
<p>那么onclick是点击事件，我们还有鼠标移入事件和移出事件</p>
<p>onmouseout是移出事件，onmouseover是移入事件</p>
<p>移入事件，鼠标移动到某个元素上，这个元素触发onmouseover事件</p>
<p>我们在第一个ul里给出移入事件和移出事件，再到JS里去写函数</p>
<p>注意：<br/>ul是块级元素，是整行的，同学们可以自己加个背景颜色看效果<br/>
显示出来的二级ul也是块级元素，它会占用自己的位置而影响之后的元素</p>
<script>
function dianji(){
//这里简单测试一下 onclick点击事件
alert('嗨，同学们好！');
}
//function关键字 定义 函数 yiru()
function yiru(){
var erji = document.getElementById("er");
//找到二级ul的ID，然后修改它的样式，就可以显示出来了
erji.style.display="block";
}
//那么移出事件是同一个意思，就是反过来即可
function yichu(){
var erji = document.getElementById("er");
//找到二级ul的ID，然后修改它的样式，就可以显示出来了
erji.style.display="none";
}
</script>
</body>
</html>

 
二级ul显示之后，会影响之后的元素比如这里的p元素，那这样做的话，会导致页面乱掉的，用户体验不够友好，所以我们可以在css里面加样式，比如定位咯！