zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Erlang顺序型编程
    [转]理解gen_server behaviour
    [转]Parsing Text and Binary Files With Erlang
    [转]Running Hadoop On Ubuntu Linux (SingleNode Cluster)
    [转]erlang 监督树
    [转]Erlang之IO编程
    [转]分段表
    [转]如何“打败”CAP定理
    [转]A Millionuser Comet Application with Mochiweb
    [转]消息队列软件大比拼
  • 原文地址:https://www.cnblogs.com/no7dw/p/1753493.html
Copyright © 2011-2022 走看看