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