⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 index.jsp~3~

📁 css+Ajax技术实现学员分数查看的功能
💻 JSP~3~
字号:
<%@ page contentType="text/html; charset=GBK" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<STYLE type="text/css">
<!--
.article {font-size: 9pt;
BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); POSITION: absolute; VISIBILITY: hidden
; background-color: #FFCC00; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 0px}
-->
</STYLE>
<script language="JavaScript" type="text/JavaScript">
<!--
	var obj = function(objid)
	{
		if (document.getElementById)
		{
			return eval("document.getElementById('"+objid+"')");
		}
		else if (document.all)
		{
			return eval("document.all"+objid);
		}
		return null;
	}

	function ShowHide(layerId,flag)
	{
		document.onmousemove = mouseMove;

		var layer = obj(layerId);

		layer.style.visibility = flag;

		if (flag == "hidden")
		{
			document.onmousemove = null;
		}
	}

	function mousePosition(ev)
	{
		if(ev.pageX || ev.pageY)
		{
			return {x:ev.pageX, y:ev.pageY};
		}
		return{
			x:ev.clientX  + document.body.scrollLeft - document.body.clientLeft,
			y:ev.clientY  + document.body.scrollLeft - document.body.clientLeft
		};
	}

	function mouseMove(ev)
	{
		ev = window.event;
		var mousePos = mousePosition(ev);

		var scoreLay = obj('score');
		scoreLay.style.left =  mousePos.x + 10;
		scoreLay.style.top = mousePos.y + 10;
	}
//-->
</script>
<style type="text/css">
<!--
table
{
	font-family: "宋体";
	font-size: 12px;
}
-->
</style>
</head>

<body>
<div id="score" style="FILTER: revealTrans(transition=23,duration=0.5) blendTrans(duration=0.5); position:absolute; left:683px; top:71px; width:264px; height:158px; z-index:1; background-color: #FFF8D9; layer-background-color: #FFF8D9; border: 1px none #000000; visibility: hidden;">
	<!--<div id="T001" class="article">-->
    <table width="264" height="160" border="1">
      <tr>
        <td width="121">姓名</td>
        <td width="127"><span id="name">王业成</span></td>
      </tr>
      <tr>
        <td>JAVA</td>
        <td><span id="java">80</span></td>
      </tr>
      <tr>
        <td>.NET</td>
        <td><span id="net">70</span></td>
      </tr>
      <tr>
        <td>JAVASCRPIT</td>
        <td><span id="js">50</span></td>
      </tr>
    </table>
</div>
<center>
<h2>北大青鸟S2T68考试成绩公布</h2>
<table width="298" height="195" border="1" onMouseOver="document.onmousemove = mouseMove" onMouseOut="document.onmousemove = null">
  <tr>
    <th width="141">班级</th>
    <th width="141">姓名</th>
  </tr>
  <tr>
    <td>S2T68</td>
    <td ><span  onMouseOver="ShowHide('score','visible')" onMouseOut="ShowHide('score','hidden')"  style="cursor:hand">张三</span></td>
  </tr>
  <tr>
    <td>S2T68</td>
    <td><span  onMouseOver="ShowHide('score','visible')" onMouseOut="ShowHide('score','hidden')"  style="cursor:hand">李四</span></td>
  </tr>
  <tr>
    <td>S2T68</td>
    <td><span  onMouseOver="ShowHide('score','visible')" onMouseOut="ShowHide('score','hidden')"  style="cursor:hand">王五</span></td>
  </tr>
  <tr>
    <td>S2T68</td>
    <td><span  onMouseOver="ShowHide('score','visible')" onMouseOut="ShowHide('score','hidden')"  style="cursor:hand">王业成</span></td>
  </tr>
</table>
<p>将鼠标移到姓名上会显示相应的详细信息</p>
</center>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -