Как поместить div относительно указателя мыши с помощью jQuery?

Ответ 1

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
});  
$(".classForHoverEffect").mouseover(function(){
  $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});

вышеприведенная функция сделает DIV по всей ссылке, где бы она ни находилась на странице. Он медленно исчезает, когда ссылка зависнет. Вы также можете использовать .hover(). Оттуда DIV останется, поэтому, если вы хотите, чтобы DIV исчез, когда мышь уходит, а затем

$(".classForHoverEffect").mouseout(function(){
  $('#DivToShow').fadeOut('slow');
});

Если вы уже позиционируете DIV, вы можете просто использовать

$('.classForHoverEffect').hover(function(){
  $('#DivToShow').fadeIn('slow');
});

Кроме того, помните, что ваш стиль DIV должен быть установлен на display:none;, чтобы он мог исчезать или отображаться.

Ответ 2

Существует множество примеров использования JQuery для получения координат мыши, но никто не исправил мою проблему.

Тело моей веб-страницы составляет 1000 пикселей в ширину, и я центрирую его в середине окна пользовательского браузера.

body {
    position:absolute;
    width:1000px;
    left: 50%;
    margin-left:-500px;
}

Теперь, в моем JavaScript-коде, когда пользователь щелкнул правой кнопкой мыши на моей странице, я хотел, чтобы div отображался в позиции мыши.

Проблема заключается в том, что использование значения e.pageX было не совсем правильным. Это будет хорошо работать, если я изменил размер окна браузера на ширину около 1000 пикселей. Затем поп-div появится в правильном положении.

Но если увеличить размер окна моего браузера до, скажем, 1200 пикселей в ширину, то div появится примерно в 100 пикселях справа от того, где пользователь нажал.

Решение состоит в объединении e.pageX с ограничивающим прямоугольником элемента body. Когда пользователь меняет размер своего окна браузера, изменяется значение элемента слева "элемента body, и мы должны учитывать это:

// Temporary variables to hold the mouse x and y position
var tempX = 0;
var tempY = 0;

jQuery(document).ready(function () {
    $(document).mousemove(function (e) {
        var bodyOffsets = document.body.getBoundingClientRect();
        tempX = e.pageX - bodyOffsets.left;
        tempY = e.pageY;
    });
}) 

Уф. Мне потребовалось некоторое время, чтобы исправить это! Надеюсь, это полезно для других разработчиков!

Ответ 3

Вам не нужно создавать $(document).mousemove( function(e) {}) для обработки мыши x, y. Получите событие в функции $.hover, и оттуда можно получить x и y положения мыши. См. Код ниже:

$('foo').hover(function(e){
    var pos = [e.pageX-150,e.pageY];
    $('foo1').dialog( "option", "position", pos );
    $('foo1').dialog('open');
},function(){
    $('foo1').dialog('close');
});

Ответ 4

<script type="text/javascript" language="JavaScript">

  var cX = 0;
  var cY = 0;
  var rX = 0;
  var rY = 0;

  function UpdateCursorPosition(e) {
    cX = e.pageX;
    cY = e.pageY;
  }

  function UpdateCursorPositionDocAll(e) {
    cX = event.clientX;
    cY = event.clientY;
  }
  if (document.all) {
    document.onmousemove = UpdateCursorPositionDocAll;
  } else {
    document.onmousemove = UpdateCursorPosition;
  }

  function AssignPosition(d) {
    if (self.pageYOffset) {
      rX = self.pageXOffset;
      rY = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      rX = document.documentElement.scrollLeft;
      rY = document.documentElement.scrollTop;
    } else if (document.body) {
      rX = document.body.scrollLeft;
      rY = document.body.scrollTop;
    }
    if (document.all) {
      cX += rX;
      cY += rY;
    }
    d.style.left = (cX + 10) + "px";
    d.style.top = (cY + 10) + "px";
  }

  function HideContent(d) {
    if (d.length < 1) {
      return;
    }
    document.getElementById(d).style.display = "none";
  }

  function ShowContent(d) {
    if (d.length < 1) {
      return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
  }

  function ReverseContentDisplay(d) {
    if (d.length < 1) {
      return;
    }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    if (dd.style.display == "none") {
      dd.style.display = "block";
    } else {
      dd.style.display = "none";
    }
  }
  //-->
</script>


<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">
[show on mouseover, hide on mouseout]
</a>
<div id="uniquename3" style="display:none;
position:absolute;
border-style: solid;
background-color: white;
padding: 5px;">
  Content goes here.
</div>