<!DOCTYPE html>
HTML模板
<br /> form{<br /> position:absolute<br /> left:100px<br /> top:50px<br /> width:400px<br /> height:300px<br /> border:1px solid #aaaaaa<br /> }<br />
<br /> var t<br /> function closeForm(){<br /> var form=document.getElementById("form")<br /> form.style.display="none"<br /> }<br /> function showForm(){<br /> var form=document.getElementById("form")<br /> form.style.display="block"<br /> window.clearTimeout(t)<br /> }<br /> function timer(){<br /> t=window.setTimeout(showForm,10000)<br /> }<br />
jsp中：<body>
<div style="position: absolutez-index:90" id="div1">我不动</div>
<div>我动<div>
</body>
//有的将position设置成fixed,我试了试效果不如position好,设置z-index，向里的深度，我这儿设置90，你要覆盖几个div，设置数大于那个数就行。
js中：
我这儿用jquery写。
$(document).ready(function(){
$(window).scroll(function(){//滚动时触发函数
$("#div1").css("top",$(document).scrollTop())//将滚动条高度赋给悬浮框。
})
})
导入jquery库，效果就出来了。
效果如图
<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
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">
学生信息系统
</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>
