jQuery - Folgen Sie dem Cursor mit einem DIV

79

Wie kann ich jQuery verwenden, um dem Cursor mit einem DIV zu folgen?

jquery html cursor

— Peter
quelle

140

Sie können dem Cursor nicht mit einem folgen DIV, aber Sie können ein zeichnen, DIVwenn Sie den Cursor bewegen!

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

Dieser Div muss vom Schwimmer entfernt sein, position: absolutesollte also eingestellt werden.

— jAndy
quelle

11

Ich hatte einige Probleme damit, dass dies richtig funktioniert. Verwenden einer reinen jQuery-Lösung, anstatt .css()für mich zu arbeiten. Verwenden Sie innerhalb der Funktion stattdessen diese Zeile: $('#your_div_id').offset({left: e.page, top: e.pageY});

— Brad

1

Schöne Demo @Reigel! Ich habe es ein wenig modifiziert, um eine horizontale Linie anzuzeigen ( jsfiddle.net/rg8S8 ). Ich habe vor, dies zu verwenden, um Menschen beim Lesen von Plots zu helfen (es handelt sich um PNG-Bilder, daher kann ich nicht viel tun, um Werte automatisch als Text anzuzeigen). Es sollte viel besser funktionieren als "Augapfel" -Werte.

— Tim Swast

2

@jAndy ist es möglich, dies zu tun, wenn sich das div in einem übergeordneten div befindet? Wenn der Benutzer die Maus mit dem übergeordneten / Container-Div bewegt, bewegt sich das untergeordnete Div innerhalb des Containers?

— MonteCristo

Diese Lösung ist schrecklich! Erstens wird jQuery verwendet, aber zweitens sind die Einstellungen oben und links sehr ineffizient, da sie zu Neulackierungen führen. Google und andere empfehlen die Verwendung von transform: translate, da dies keine Neulackierungen verursacht und aus dem vorhandenen GPU-Puffer zieht. Ich weiß, dass diese Antwort 9 Jahre alt ist, aber BEARBEITEN Sie sie zumindest . Mehr dazu hier: html5rocks.com/de/tutorials/speed/high-performance-animations

— DavidsKanal

19

Dafür benötigen Sie jQuery nicht. Hier ist ein einfaches Arbeitsbeispiel:

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

Ich habe mich dafür entschieden, position: fixed;dass das Scrollen kein Problem darstellt.

— haariger Yuppie
quelle

15

Das funktioniert bei mir. Hat eine schöne verspätete Aktion im Gange.

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

Schön und einfach

— Uller
quelle

2

Seine Antwort ist etwas Neues, ein dämpfender Effekt

— Jonah