當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript 游动层onmouseover

發(fā)布時間：2023/12/9 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript 游动层onmouseover 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>學生信息系統(tǒng)</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;
width: 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">
學生信息系統(tǒng)
</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>
專業(yè):軟開<br>
學院:軟件學院
</div>
</tr>
<tr>
<td bgcolor="#ffffaa" rowspan=2>姓名
</td>
<td colspan="2" bgcolor="#ffffaa">
<div id="C13" href="#"
οnmοuseοver="return showInfo.showLayer(event,'C1320');"
οnmοuseοut="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>
專業(yè):軟開<br>
學院:軟件學院
</div>
</tr>
<tr>
<td bgcolor="#ffffaa" rowspan=2>姓名
</td>
<td colspan="2" bgcolor="#ffffaa">
<div id="C12" href="#"
οnmοuseοver="return showInfo.showLayer(event,'C1220');"
οnmοuseοut="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/archive/2010/06/07/1753493.html

總結

以上是生活随笔為你收集整理的JavaScript 游动层onmouseover的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [(转)hystar整理]Entity
下一篇：《JavaScript 高级程序设计》