码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-25 11:44:08      阅读:309      评论:0      收藏:0      [点我收藏+]

标签:char   bsp   isp   点击   说明   round   关键字   修改   rip   

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

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

标签:char   bsp   isp   点击   说明   round   关键字   修改   rip   

原文地址:http://www.cnblogs.com/longfeng995/p/7590418.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!