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

79

Jak mogę używać jQuery do podążania za kursorem z DIV?

jquery html cursor

— Piotr
źródło

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.

— jAndy
źródło

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.

— włochaty yuppie
źródło

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

— Uller
źródło

2

Jego odpowiedź dostarcza czegoś nowego, efektu tłumienia

— Jonah