java 获取鼠标绝对坐标_获取鼠标的绝对位置

我们经常会遇到一种效果，那就是当鼠标移动到某一个链接上时显示一个浮动层，里面显示具体的详细信息。也就是用div模拟title的效果。

例如，html中有一个更多的a标签：

更多

更多详细内容

这里是css样式

.more_info{

position: absolute;

left: 0px;

top: 0px;

border: 1px solid #CCC;

background-color: #FFE9D0;

padding: 5px;

}

这是js方法(这里用到了jquery这个js库，其实也可以不需要用到的，我这里为了方便吧，就用了。)

function showMore(e,id){

var e = e||window.event;

var scrollx = window.scrollX|| document.documentElement.scrollLeft;

var scrolly = window.scrollY|| document.documentElement.scrollTop;

var x = parseFloat(e.clientX) + parseFloat(scrollx) ;

var y = parseFloat(e.clientY) + parseFloat(scrolly);

$('.more_info').hide();

var $more = $('#'+id);

$more.css({'left':x,'top':y,'display':'block'});

}

其中的难点主要就是滚动条的滚动条距离，以及其兼容性问题。在ie下只能用document.documentElement.scrollLeft;其他浏览器下window.scrollX即可。