jQuery: sigue el cursor con un DIV

79

¿Cómo puedo usar jQuery para seguir el cursor con un DIV?

jquery html cursor

— Pedro
fuente

140

No puedes seguir el cursor con a DIV, ¡pero puedes dibujar a DIVcuando mueves el cursor!

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

Ese div debe estar fuera del flotador, por lo que position: absolutedebe establecerse.

— jAndy
fuente

11

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

— Brad

1

¡Buena demostración @Reigel! Lo modifiqué un poco para mostrar una línea horizontal ( jsfiddle.net/rg8S8 ). Estoy planeando usar esto para ayudar a las personas a leer gráficos (son imágenes png, por lo que no puedo hacer mucho para mostrar valores como texto, automáticamente). Debería funcionar mucho mejor que los valores "ocultos".

— Tim Swast

2

@jAndy ¿es posible hacer esto cuando el div está en un div padre? entonces, cuando el usuario mueve el mouse con el div padre / contenedor ... ¿el div secundario se mueve dentro del contenedor?

— MonteCristo

¡Esta solución es horrible! En primer lugar, utiliza jQuery, pero en segundo lugar, la configuración superior e izquierda son muy ineficientes, ya que provocan repintados. Google y otros recomiendan usar transform: translate, ya que eso no provocará repintados y extracciones del búfer de GPU existente. Sé que esta respuesta tiene 9 años, pero al menos EDÍTELA . Más sobre esto aquí: html5rocks.com/en/tutorials/speed/high-performance-animations

— DavidsKanal

19

No necesitas jQuery para esto. Aquí hay un ejemplo de trabajo simple:

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

Elegí position: fixed;para que el desplazamiento no fuera un problema.

— yuppie peludo
fuente

15

Esto funciona para mi. 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);

Agradable y simple

— Uller
fuente

2

Su respuesta es proporcionar algo nuevo, un efecto amortiguador

— Jonás