jQuery - Folgen Sie dem Cursor mit einem DIV

122

Sie können dem Cursor nicht mit DIV folgen, aber Sie können einen DIV zeichnen, wenn Sie den Cursor bewegen!

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

Das div aus dem Schwimmer sein muss, sollte so position: absolute eingestellt werden.

Quelle

2010-08-02 07:53:15 jAndy

+22

+1 und demo http://jsfiddle.net/hj57k/ – Reigel

+1

@Reigel - deine Demo ist besser als [meine] (http://jsfiddle.net/SnJ92/) :) – sje397

+9

Ich hatte ein paar Probleme mit bekommen das funktioniert richtig. Die Verwendung einer reinen jQuery-Lösung anstelle von '.css()' endete für mich. Verwenden Sie stattdessen die folgende Zeile: '$ ('# your_div_id'). Offset ({left: e.page, top: e.pageY});' – Brad

12

Das funktioniert für mich. Hat eine schöne verzögerte Aktion.

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

Nizza und simples

Quelle

2013-10-31 13:54:31 Uller

+2

Seine Antwort ist etwas neues, eine dämpfende Wirkung – Jonah

13

Sie benötigen jQuery nicht dafür. Hier ist ein einfaches Ausführungsbeispiel:

<!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 wählte position: fixed; so würde Scrollen kein Problem sein.

Quelle

2015-05-04 11:12:45

jQuery - Folgen Sie dem Cursor mit einem DIV

Antwort

Verwandte Themen