<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatibl(www.111cn.net)e" content="IE=EmulateIE7" />
<title>查看本次</title>
<link href="css/Gcss.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body,td,th {
font-family: "楷体";
color: black;
}
a:link {
color:purple;font-size:30;
}
a:visited {
color:purple;font-size:30;
}
a:active{color:green;font-size:30;}
a:hover{
color:red;font-family:楷体;font-size:30;}
#name{position:absolute;top:0%;left:90%;}
#h{position:absolute;top:5%;left:30%;}
#exit{position:absolute;top:0;right:0;}
#weather{position:absolute;bottom:80%;right:0;}
</style>
</head>
<body>
<div id=header>
<div id="background" class="wall"></div>
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<img src="images/xh.jpg" height="20%" width="20%">
<div id=h>
<marquee behavior=scroll direction=left width=700 hspace=1 vspace=2 scrollmount=1 scrolldelay=0 loop=-1>
<font size=7 color=black face="楷体"><b>翱翔云签到--软件与微电子学院<sup>©</sup></b></font>
</marquee></div>
<div id=name><input type="button" value="changkunp">
</div>
<div id=exit><input type=button value="注销">
</div>
</div>
<div id=sidebar>
<ul>
<li><a href="Hindex.html"><font size=5>首页</font></a></li>
<li><a href="Hnew.html"><font size=5>新建签到</font></a></li>
<li><a href="G-lookToday.html"><font size=5>查看本次</font></a></li>
<li><a href="G-History.html"><font size=5>历史记录</font></a></li>
<li><a href="#"><font size=5>设置管理员</font></a></li>
<li><a href="#"><font size=5>管理用户</font></a></li>
<a href="Hago.html"><font size=5>查看历史</font></a></li>
</ul>
</div>
</div>
<div id=mainbox>
<div id="demo">
<table name="table1" width=90% height=70% border=1 >
<tr><td>班级</td><td>学号</td><td>姓名</td><td>次数:已/总</td><td>更多</td></tr>
<tr name=r1><td name=d11>14011401</td><td name=d12>2014303311</td><td name=d13>某某某</td><td name=d14>4/5</td><td name=d15><a class="tooltip" id="tooltip1">详情</a></td></tr>
<tr name=r2><td name=d21>14011401</td><td name=d22>2014303321</td><td name=d23>某某某</td><td name=d24>4/5</td><td name=d25><a class="tooltip" id="tooltip2">详情</a></td></tr>
<tr name=r3><td name=d31>14011401</td><td name=d32>2014303331</td><td name=d33>某某某</td><td name=d34>4/5</td><td name=d35><a class="tooltip" id="tooltip3">详情</a></td></tr>
<div id="txt"></div>
</table>
</div>
</div>
<script>
function addEvent(element, event, callbackFunction) {
if (element.addEventListener) {
element.addEventListener(event, callbackFunction, false);
} else if (element.attachEvent) {
element.attachEvent('on' + event, callbackFunction);
}
}
var toolTipBoxClass = "tooltip-box";
var isIE = navigator.userAgent.indexOf("MSIE") > -1;
var getEl = function(id){
return document.getElementById(id);
}
var demo = getEl("demo");
//obj - ToolTip 超链接元素
//id - ToolTip提示框id
//html - ToolTip提示框HTML
//width - ToolTip提示框宽度（可选）
//height - ToolTip提示框高度（可选）
function showToolTip(obj, id, html, width, height){
if(getEl(id)==null){
//创建 <div class="tooltip-box" id="xx">xxxxxx</div>
var toolTipBox;
toolTipBox = document.createElement("div");
toolTipBox.className = toolTipBoxClass;
toolTipBox.id = id;
toolTipBox.innerHTML = html;
obj.appendChild(toolTipBox);
toolTipBox.style.width = width? width+"px":"auto";
toolTipBox.style.height = height? height+"px":"auto";
if(!width && isIE){
toolTipBox.style.width = toolTipBox.offsetWidth;
}
toolTipBox.style.position = "absolute";
toolTipBox.style.display = "block";
var left = obj.offsetLeft;
var top = obj.offsetTop + 20;
//left，不让ToolTip提示框超出浏览器
if(left + toolTipBox.offsetWidth > document.body.clientWidth){
var demoLeft = demo.offsetLeft;
left = document.body.clientWidth - toolTipBox.offsetWidth - demoLeft;
if (left < 0) left = 0;
}
toolTipBox.style.left = left + "px";
toolTipBox.style.top = top + "px";
addEvent(obj,"mouseleave", function(){
setTimeout(function(){
getEl(id).style.display = "none";
}, 300);
});
}
else{
//显示
getEl(id).style.display = "block";
}
}
addEvent(demo, "mouseover", function(e){
var event = e || window.event;
var target = event.target || event.srcElement;
if(target.className == "tooltip"){
var _html;
var _id;
var _width = 200;
switch (target.id) {
case "tooltip1":
_id = "t1";
_html = "中华人民共和国";
break;
case "tooltip2":
_id = "t2";
_html = "<tr><td>班级</td><td>学号</td><td>姓名</td><td>次数:已/总</td><td>更多</td></tr>
<tr name=r1><td name=d11>14011401</td><td name=d12>2014303311</td><td name=d13>某某某</td><td name=d14>4/5</td><td name=d15>详情</td></tr>
<tr name=r2><td name=d21>14011401</td><td name=d22>2014303321</td><td name=d23>某某某</td><td name=d24>4/5</td><td name=d25>详情</td></tr>
<tr name=r3><td name=d31>14011401</td><td name=d32>2014303331</td><td name=d33>某某某</td><td name=d34>4/5</td><td name=d35详情</td></tr>";
break;
case "tooltip3":
_id = "t3";
_html = "<h2>签到详情</h2><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p>";
_width = 100;
break;
break;
default:
return false;
}
showToolTip(target, _id, _html, _width);
}
});
</script>
<div id=footer>
<font size=6 color=yellow face="楷体"><center>翱翔云签到--软件与微电子学院--2015/7/24<sup>©</sup></center></font>
</div>
</body>
</html>
