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

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里面加样式，比如定位咯！
 

posted on 2017-09-25 09:25  幸享龙枫  阅读(505)  评论(0)  编辑  收藏  举报

导航