javascript div定位

Question

我正在使用此脚本在鼠标悬停时将图像显示为弹出窗口。我面临的困难是它在不同的显示器中定位不好。它必须与解决方案有关。

function LargeImage(obj, e)
{
  var imgbtn=document.getElementById('<%=imgbtn1.ClientID%>');  
  imgbtn.src=obj;//source of the image
  document.getElementById('imgbox').style.visibility="visible";
  document.getElementById('imgbox').style.position="absolute";
  document.getElementById('imgbox').style.left=e.clientX-150 + "px";
  document.getElementById('imgbox').style.top=225 +"px"; 
} 

<div id="imgbox"><asp:imagebutton id="imgbtn1" runat="server" OnClick="ImageButton4_Click"/></div>

谢谢。

Answer 1

你可以这样做

document.getElementById('imgbox').style.position="fixed";
document.getElementById('imgbox').style.left=e.clientX + "px";
document.getElementById('imgbox').style.top= e.clientY + "px"; 

将在窗口中显示鼠标位置的图片（如果用户滚动，则弹出窗口保持不变）。

否则你需要补偿文件滚动，比如

编辑：修复滚动值（对于firefox）

document.getElementById('imgbox').style.position="absolute";
document.getElementById('imgbox').style.left=String(e.clientX+document.documentElement.scrollLeft)+"px";
document.getElementById('imgbox').style.top=String(e.clientY+document.documentElement.scrollTop)+"px"; 

您可以在这里查看一个演示，确定要通过浏览器滚动偏移来读取哪个属性 http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

Answer 2

您似乎正在修改imgbox div的样式，以便left位置距离光标150px，但top位置距离顶部仅225px它的容器（可能）。

top样式是否也应该与光标相关？

此外，我们无法从您发布的代码中看到您的函数何时或如何被调用。我们也没有imgbox元素的上下文。更多信息将非常有用。