jQuery – 跟随光标与DIV
我如何使用jQuery跟随光标与DIV？
你不能跟随DIV的光标，但你可以在移动光标时画一个DIV ！
$(document).on('mousemove', function(e){ $('#your_div_id').css({ left: e.pageX, top: e.pageY }); });
这个div必须是浮动的，所以position: absolute应该被设置。
这对我有用。 有一个很好的延迟行动正在进行。
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);
很好，很简单
你不需要这个jQuery。 这是一个简单的工作示例：
<!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>
我select了position: fixed; 所以滚动不会是一个问题。
