将div相对于鼠标位置定位

Question

所有,

如何相对于鼠标位置定位以下div,以便鼠标和div不会在页面的末端不同步.可能就像一个工具提示总是在页面的末尾显示完美的位置.

<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
 </style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).mouseover(function(event){
$("#div1").css({'top': event.pageY, 'left': event.pageX});  
});
});
</script>
<div id="div1">mouseover me</div>

谢谢........

Answer 1

你可以尝试这个例子,

$(window).mouseover(function(event){
    var x = event.pageX,
        y = event.pageY,
        scX = $(window).scrollLeft(),
        scY = $(window).scrollTop(),
        scMaxX = scX + $(window).width(),
        scMaxY = scY + $(window).height(),
        wd = $("#div1").width(),
        hgh = $("#div1").height();

    if (x + wd > scMaxX) x = scMaxX - wd;
    if (x < scX) x = scX;
    if (y + hgh > scMaxY) y = scMaxY - hgh;
    if (y < scY) y = scY;
    $("#div1").css({'top': y, 'left': x});  
});