jQuery - İmleci bir DIV ile takip edin

122

İmleci DIV ile takip edemezsiniz, ancak imleci hareket ettirirken bir DIV çizebilirsiniz!

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

div şamandıra kapalı olmalıdır O yüzden position: absolute ayarlanmalıdır.

kaynak

2010-08-02 07:53:15 jAndy

+22

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

+1

@Reigel - senin demo daha iyi [mine] (http://jsfiddle.net/SnJ92/) :) – sje397

+9

Başlarken ile bazı sorun vardı Bu doğru çalışıyor. .css() 'yerine saf bir jQuery çözümü kullanmak benim için çalışmayı sonlandırdı. Fonksiyonun içinde şu satırı kullanın: '$ ('# your_div_id') offset ({left: e.page, top: e.pageY}); – Brad

12

Bu benim için çalışır. İyi bir gecikme eylemi oluyor.

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

Güzel ve simpleks

kaynak

2013-10-31 13:54:31 Uller

+2

Onun cevabı yeni, sönümleyici bir etki sağlıyor – Jonah

13

Bunun için jQuery gerekmez.

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

Öyle bir sorun olmaz kaydırma position: fixed; seçti: İşte basit çalışan bir örnektir.

kaynak

2015-05-04 11:12:45

jQuery - İmleci bir DIV ile takip edin

cevap

İlgili konular