jQuery - Siga el cursor con un DIV

122

No puede seguir el cursor con un DIV, pero puede dibujar un DIV al mover el cursor!

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

Eso div debe estar fuera de la flotación, por lo que se debe establecer position: absolute.

Fuente

2010-08-02 07:53:15 jAndy

+22

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

+1

@Reigel - su demostración es mejor que [la mía] (http://jsfiddle.net/SnJ92/) :) – sje397

+9

Tuve algunos problemas para obtener esto funciona correctamente Usar una solución jQuery pura en lugar de '.css()' terminó funcionando para mí. Dentro de la función, use esta línea: '$ ('# your_div_id'). Offset ({left: e.page, top: e.pageY});' – Brad

12

Esto funciona para mí. Tiene una buena acción retrasada.

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

Niza y simples

Fuente

2013-10-31 13:54:31 Uller

+2

Su respuesta es proporcionar algo nuevo, un efecto de amortiguación – Jonah

13

No es necesario jQuery para esto. Aquí es un simple ejemplo de trabajo:

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

me eligieron position: fixed; modo de desplazamiento no sería un problema.

Fuente

2015-05-04 11:12:45

jQuery - Siga el cursor con un DIV

Respuesta

Cuestiones relacionadas