我正在创建一个基于AJAX的详细系统，其中的细节在 onmouseover 事件中可见，为此我创建了以下HTML来显示
<html>
<head>
<Script src="scripts/ajaxfunctions.js"></Script>
</head>
<body>
<table widht="1000">
<tbody>
<tr>
<td width="500">
<img src="Images/0.jpg" width="100" height="100" onmouseover="func(0)" onmouseout="clear()" />
</td>
<td rowspan="8" width="500">
<div id="myDiv" ></div>
</td>
<tr>
<td width="500">
<img src="Images/1.jpg" width="100" height="100" onmouseover="func(1)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/2.jpg" width="100" height="100" onmouseover="func(2)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/3.jpg" width="100" height="100" onmouseover="func(3)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/4.jpg" width="100" height="100" onmouseover="func(4)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/5.jpg" width="100" height="100" onmouseover="func(5)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/6.jpg" width="100" height="100" onmouseover="func(6)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/7.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/8.jpg" width="100" height="100" onmouseover="func(8)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/9.jpg" width="100" height="100" onmouseover="func(9)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/10.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/11.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/12.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/13.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/14.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/15.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/16.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/17.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/18.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/19.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/20.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/21.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/22.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/23.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr><tr>
<td width="500">
<img src="Images/24.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/24.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/25.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
<tr>
<td width="500">
<img src="Images/26.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
在这里详细信息将以div标签显示....但是当左侧的条目展开时，DIV标签中的内容不可见...向上滚动以查看详细信息...是否有任何内容如何将右侧div固定在屏幕上？
Javascript代码在这里
function func(num)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
xmlhttp=new ActiveXObject("MSXML2.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="";
try
{
var xmlDoc=xmlhttp.responseXML;
txt="";
var a = 0;
x=xmlDoc.getElementsByTagName("Person");
var xx= x[num].getElementsByTagName("Name");
txt += "Name : " + xx[0].firstChild.nodeValue+ "<br>" ;
xx = x[num].getElementsByTagName("RegistrationNO");
txt += "RegistrationNo : " + xx[0].firstChild.nodeValue+ "<br>" ;
xx = x[num].getElementsByTagName("Address");
txt += "Address : " + xx[0].firstChild.nodeValue+ "<br>" ;
xx= x[num].getElementsByTagName("ContactNo");
txt += "Contact No : " + xx[0].firstChild.nodeValue+ "<br>";
document.getElementById("myDiv").innerHTML=txt;
}
catch (er)
{
document.getElementById('myDiv').innerHTML=er+" 1";
}
}
}
try
{
xmlhttp.open("GET","http://localhost/StudentDetails/Data/database.xml",true);
xmlhttp.send();
}
catch (er)
{
document.getElementById('myDiv').innerHTML=er+" 2";
}
}
答案 0 :(得分：1)
基本答案是你可以在CSS中使用position: fixed将div放在你想要的位置，并在页面的其余部分滚动时不要移动它。
如果这对您不起作用，您可以使用javascript将div放置在触发鼠标悬停事件的图像附近，以便在视图范围内。
我使用jQuery组装了一个演示，这可以用直接的javascript完成，我喜欢jQuery的紧凑外观
position: fixed
position: absolute - 对齐图片
position: absolute - 按屏幕
我还为演示更改了其他一些内容：
我经常试图避免使用表格，我觉得div在大多数情况下更容易使用。我会建议3个div，一个div来保存图片，div来显示数据，一个外部div来包含和对齐另外两个：
<div id="outer">
<div id='pictures'></div>
<div id="myDiv"></div>
</div>
如果您的图像名称与示例一样可预测，则可以动态生成所有图像标记：
$(function () {
for (i = 0; i < 27; i++) {
$("div#pictures").append("<img id='" + i + "' class='studentimg' src='Images/" + i + ".jpg' />");
$(".studentimg").on('mouseover', function (e) {func(this);}).on('mouseout', clear);
}
});
然后将它与一些CSS结合起来：
div#outer {
position: relative;
}
div#myDiv {
position: absolute;
width: 500px;
left: 135px;
}
div#pictures {
float: left;
width: 120px;
}
img.studentimg {
width: 100px;
height: 100px;
}
我还注意到，每次将鼠标悬停在任何一个图像上时，都会为所有人重新加载数据。我认为在页面加载时加载列表可能更有效，并且预先构建了文本。
重用代码（也可以用jQuery压缩），定义并填充数组：
var peopleList = Array();
function fetchXML() {
var xmlhttp;
var txt, x, xx, i;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
txt = "";
try {
var xmlDoc = xmlhttp.responseXML;
x = xmlDoc.getElementsByTagName("Person");
for (i = 0; i < x.length; i++) {
txt = "";
var xx = x[i].getElementsByTagName("Name");
txt += "Name : " + xx[0].firstChild.nodeValue + "<br>";
xx = x[num].getElementsByTagName("RegistrationNO");
txt += "RegistrationNo : " + xx[0].firstChild.nodeValue + "<br>";
xx = x[num].getElementsByTagName("Address");
txt += "Address : " + xx[0].firstChild.nodeValue + "<br>";
xx = x[num].getElementsByTagName("ContactNo");
txt += "Address : " + xx[0].firstChild.nodeValue + "<br>";
peopleList[i] = txt;
}
} catch (er) {
peopleList[i] = er + " 1";
}
}
}
try {
xmlhttp.open("GET", "http://localhost/StudentDetails/Data/database.xml", true);
xmlhttp.send();
} catch (er) {
peopleList = null;
document.getElementById('myDiv').innerHTML = er + " 2";
}
}
所以在鼠标悬停时，您只需要显示文字：
function func(el) {
$("#myDiv").html(peopleList[el.id]);
}