jQuery - 用 DIV 跟随光标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3385936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Follow the cursor with a DIV
提问by Peter
How can I use jQuery to follow the cursor with a DIV?
如何使用 jQuery 跟随带有 DIV 的光标？
回答by jAndy
You can't follow the cursor with a DIV, but you can draw a DIVwhen moving the cursor!
不能用 a 跟随光标DIV，但可以DIV在移动光标时绘制 a ！
$(document).on('mousemove', function(e){
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
});
That div must be off the float, so position: absoluteshould be set.
该 div 必须脱离浮动，因此position: absolute应该设置。
回答by hairy yuppie
You don't need jQuery for this. Here's a simple working example:
为此，您不需要 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>
I chose position: fixed;so scrolling wouldn't be an issue.
我选择position: fixed;这样滚动不会成为问题。
回答by Uller
This works for me. Has a nice delayed action going on.
这对我有用。有一个很好的延迟动作正在进行。
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);
Nice and simples
美好而简单
