Расположение div относительно позиции мыши - PullRequest
6 голосов
/ 08 февраля 2010

All

Как расположить следующий 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>

Спасибо ........

1 Ответ

6 голосов
/ 10 декабря 2010

Вы можете попробовать с этим примером,

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