Pytanie Jak ustawić div w stosunku do wskaźnika myszy za pomocą jQuery?


Załóżmy, że mam jeden link na mojej stronie i chcę, aby po umieszczeniu myszy tuż nad linkiem, div pokaże tam zgodnie z myszą x, y.

Jak mogę to zrobić za pomocą jQuery?


44
2018-01-12 07:44


pochodzenie


stackoverflow.com/questions/15494357/...  stackoverflow.com/questions/15635270/... - Thomas


Odpowiedzi:


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');
});

powyższa funkcja sprawi, że DIV pojawi się nad łączem, gdziekolwiek się znajduje na stronie. Zniknie powoli, gdy link się unosi. Możesz również użyć .hover (). Stamtąd DIV pozostanie, więc jeśli chcesz, aby DIV zniknęło, gdy mysz się odsunie, wtedy

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

Jeśli DIV jest już ustawione, możesz po prostu użyć

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

Pamiętaj też, że Twój styl DIV musi być ustawiony na display:none; aby go zaniknąć lub pokazać.


80
2018-01-12 07:48



k, trochę to zepsuł, nie do końca pewny, co próbujesz osiągnąć, ale możesz uzyskać współrzędne myszy za pomocą pierwszej funkcji mousemove, zapisze ją w zmiennej mouseX i mouseY, możesz wtedy dodać lub odjąć odległość, którą chcesz osiągnąć z tych zmiennych, jeśli ma to jakiś sens. - mcbeav
dzięki za odpowiedź :). - Thomas
pewnie, jeśli potrzebujesz czegoś określonego lub jakiejś dodatkowej pomocy, po prostu publikuj tutaj w komentarzach. - mcbeav
upewnij się też, że ustawiłeś #DivToShow na "absolutny" - patrick
Lepiej używać mouseenter i mouseleave. - Derek 朕會功夫


Istnieje wiele przykładów używania JQuery do pobierania współrzędnych myszy, ale żaden z nich nie rozwiązał mojego problemu.

Treść mojej strony ma szerokość 1000 pikseli i umieszczam ją pośrodku okna przeglądarki użytkownika.

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

Teraz w moim kodzie JavaScript, gdy użytkownik kliknął prawym przyciskiem myszy na mojej stronie, chciałem, aby element div pojawił się na pozycji myszy.

Problem polega na użyciu e.pageX wartość nie była całkiem odpowiednia. Byłoby dobrze, gdyby zmienić rozmiar okna przeglądarki na około 1000 pikseli. Następnie pop div by pojawiają się we właściwej pozycji.

Ale jeśli zwiększysz rozmiar okna przeglądarki do, powiedzmy, 1200 pikseli szerokości, wtedy pojawi się div 100 pikseli po prawej miejsca, w którym użytkownik kliknął.

Rozwiązaniem jest połączenie e.pageX z prostokącie ograniczającym elementu ciała. Gdy użytkownik zmieni rozmiar okna przeglądarki, "lewo"wartość zmian elementów ciała i musimy wziąć to pod uwagę:

// 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;
    });
}) 

Uff. Zajęło mi to trochę czasu, aby naprawić! Mam nadzieję, że jest to przydatne dla innych programistów!


9
2017-09-20 07:50



To ... Próbuje zrobić dokładnie to samo, ale miałem problemy. Dzięki! +1 - william44isme
Aby poprawić pionowe przesunięcie, takie jak top: 50%; margin-top: 500px; , Użyj również tempY = e.pageY - bodyOffsets.bottom;. Ale to nie zadziała, jeśli na ciele nie ma żadnych górnych ani marginesowych właściwości. - Dan Dascalescu


Nie musisz tworzyć $(document).mousemove( function(e) {}) do obsługi myszy x, y. Zdobądź wydarzenie w $.hover funkcja i stamtąd możliwe jest uzyskanie pozycji X i Y myszy. Zobacz poniższy kod:

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

7
2017-07-19 05:56





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

-2
2018-03-17 05:07



Inline JavaScript + zbyt skomplikowane kody = no good - Derek 朕會功夫
szukam kopii wklej :) - Govind KamalaPrakash Malviya
Nie ma tutaj jQuery! - Jonathan Bergeron