zoukankan      html  css  js  c++  java
  • 第十五篇 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里面加样式,比如定位咯!
     
  • 相关阅读:
    项目管理
    开源视频会议bigbluebutton开发(1)——初始化安装以及配置
    oracle休系统结构
    Tomcat上安装配置Axis
    锁表头
    文件复制三种方法
    程序员技术练级攻略
    Linux (RHEL 5.4)下安装 Oracle 10g R2
    Android 学习资料收集汇总
    WAS61安装调整和应用部署.doc
  • 原文地址:https://www.cnblogs.com/longfeng995/p/7590418.html
Copyright © 2011-2022 走看看