• JavaScript 游动层onmouseover


    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
    <title>学生信息系统</title>
    <script language="javascript">

    var showInfo = new function () {
    this.showLayer = function (e, id) {
    var p = window.event ? [event.clientX, event.clientY] : [e.pageX, e.pageY];
    with (document.getElementById(id + "").style) {
    display = "block";
    left = p[0] + 10 + "px";
    top = p[1] + 10 + "px";
    }
    if (window.event) {
    window.event.cancelBubble = true;
    } else {
    if (e) {
    e.preventDefault();
    }
    }
    };
    this.hideLayer = function (e, id) {
    with (document.getElementById(id + "").style) {
    display = "none";
    }
    if (window.event) {
    window.event.cancelBubble = true;
    } else {
    if (e) {
    e.preventDefault();
    }
    }
    };
    };

    </script>
    <style type="text/css">
    .helplay {
    z-index: 3;
    position: absolute;
    border: 1px solid #FFC30E;
    padding: 5px;
    background-color: #FFFBB8;
    text-align: left;
    color: #9C7600;
    130px;
    font-size: 15px;
    font-family: arial, sans-serif;
    }
    </style>
    </head>
    <body>
    <table width="760" border="0" align="center">
    <tr>
    <td width="20%" height="46"></td>
    <td width="60%" align="center">
    学生信息系统
    </td>
    <td width="20%"></td>
    </tr>
    <tr>
    <td width="20%" height="272" align="center"></td>
    <td align="center">
    <table>
    <tr>
    <div style="display: none" id="C1320" class="helplay">
    学号:222222<br>
    年龄:18<br>
    班级:2<br>
    专业:软开<br>
    学院:软件学院
    </div>
    </tr>
    <tr>
    <td bgcolor="#ffffaa" rowspan=2>姓名
    </td>
    <td colspan="2" bgcolor="#ffffaa">
    <div id="C13" href="#"
    onmouseover="return showInfo.showLayer(event,'C1320');"
    onmouseout="return showInfo.hideLayer(event,'C1320');">
    <b>张三</b>
    </div>
    </td>
    <td bgcolor="#ffffaa" rowspan=2>
    待定
    </td>
    </tr>


    <tr>
    <div style="display: none" id="C1220" class="helplay">
    学号:1111<br>
    年龄:28<br>
    班级:1<br>
    专业:软开<br>
    学院:软件学院
    </div>
    </tr>
    <tr>
    <td bgcolor="#ffffaa" rowspan=2>姓名
    </td>
    <td colspan="2" bgcolor="#ffffaa">
    <div id="C12" href="#"
    onmouseover="return showInfo.showLayer(event,'C1220');"
    onmouseout="return showInfo.hideLayer(event,'C1220');">
    <b>李四</b>
    </div>
    </td>
    <td bgcolor="#ffffaa" rowspan=2>
    待定
    </td>
    </tr>

    </table>
    </td>
    <td width="20%" align="center"></td>
    </tr>
    </table>
    </body>
    </html>
  • 相关阅读:
    【宗萨仁波切】研究佛教即是研究自己,而研究自己即是发现无我
    【佩玛.丘卓】在当下那一刻觉醒...
    佩玛·丘卓:人生基本的事实
    佩玛.丘卓的生活智慧——【空船】
    佩玛·丘卓 | 宽恕自己,重新开始
    佩玛·丘卓:修炼平等心
    佩玛•丘卓 :我们需要的皆已具足
    【佩玛丘卓】喂养好狼
    佩玛.丘卓:为事情如实的面目而喜悦
    佩玛·丘卓:精神勇士的口诀
  • 原文地址:https://www.cnblogs.com/no7dw/p/1753493.html
Copyright © 2020-2023  润新知