jQuery - podążaj za kursorem za pomocą DIV


Odpowiedzi:


140

Nie możesz podążać za kursorem za pomocą DIV, ale możesz narysować a DIVpodczas przesuwania kursora!

$(document).on('mousemove', function(e){
    $('#your_div_id').css({
       left:  e.pageX,
       top:   e.pageY
    });
});

Ten element div musi znajdować się poza zmienną, więc position: absolutepowinien być ustawiony.


11
Miałem problemy z poprawnym działaniem. Używanie czystego rozwiązania jQuery, zamiast .css()pracować dla mnie. Wewnątrz funkcji użyj zamiast tego tego wiersza: $('#your_div_id').offset({left: e.page, top: e.pageY});
Brad

1
Niezłe demo @Reigel! Zmodyfikowałem go nieco, aby wyświetlić linię poziomą ( jsfiddle.net/rg8S8 ). Planuję to wykorzystać, aby pomóc ludziom czytać wykresy (są to obrazy png, więc niewiele mogę zrobić, aby automatycznie wyświetlać wartości jako tekst). Powinien działać dużo lepiej niż wartości „na oko”.
Tim Swast

2
@jAndy, czy można to zrobić, gdy element div znajduje się w nadrzędnym elemencie DIV? więc kiedy użytkownik przesunie mysz za pomocą elementu div nadrzędnego / kontenera ... element div podrzędny porusza się w kontenerze?
MonteCristo

To rozwiązanie jest okropne! Przede wszystkim używa jQuery, ale po drugie, ustawienie góra i lewo są bardzo nieefektywne, ponieważ powodują przemalowanie. Google i inni zalecają użycie transform: translate, ponieważ nie spowoduje to przemalowania i nie będzie rysować z istniejącego bufora GPU. Wiem, że ta odpowiedź ma 9 lat, ale przynajmniej ją EDYTUJ . Więcej na ten temat tutaj: html5rocks.com/en/tutorials/speed/high-performance-animations
DavidsKanal

19

Nie potrzebujesz do tego jQuery. Oto prosty przykład roboczy:

<!DOCTYPE html>
<html>
    <head>
        <title>box-shadow-experiment</title>
        <style type="text/css">
            #box-shadow-div{
                position: fixed;
                width: 1px;
                height: 1px;
                border-radius: 100%;
                background-color:black;
                box-shadow: 0 0 10px 10px black;
                top: 49%;
                left: 48.85%;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var bsDiv = document.getElementById("box-shadow-div");
                var x, y;
    // On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
                window.addEventListener('mousemove', function(event){
                    x = event.clientX;
                    y = event.clientY;                    
                    if ( typeof x !== 'undefined' ){
                        bsDiv.style.left = x + "px";
                        bsDiv.style.top = y + "px";
                    }
                }, false);
            }
        </script>
    </head>
    <body>
        <div id="box-shadow-div"></div>
    </body>
</html>

Wybrałem, position: fixed;więc przewijanie nie byłoby problemem.


16

To działa dla mnie. Ma przyjemną opóźnioną akcję.

var $mouseX = 0, $mouseY = 0;
var $xp = 0, $yp =0;

$(document).mousemove(function(e){
    $mouseX = e.pageX;
    $mouseY = e.pageY;    
});

var $loop = setInterval(function(){
// change 12 to alter damping higher is slower
$xp += (($mouseX - $xp)/12);
$yp += (($mouseY - $yp)/12);
$("#moving_div").css({left:$xp +'px', top:$yp +'px'});  
}, 30);

Ładnie i prosto


2
Jego odpowiedź dostarcza czegoś nowego, efektu tłumienia
Jonah
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.