vị div tương ứng với vị trí chuột

Question

All,

Làm thế nào để Đặt div sau so với vị trí chuột sao cho chuột và div không ra ofsync tại theend của page.May được giống như một tooltip mà luôn luôn sjows vị trí hoàn hảo vào cuối trang ..

<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> 

Cảm ơn ........

Answer 1

Bạn có thể thử với ví dụ này,

$(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}); 
});