jQuery - 用 DIV 跟随光标
Posted
技术标签:
【中文标题】jQuery - 用 DIV 跟随光标【英文标题】：jQuery - Follow the cursor with a DIV 【发布时间】：2011-03-24 02:11:21 【问题描述】：如何使用 jQuery 跟随 DIV 的光标？
【问题讨论】：
【参考方案1】：你不需要 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>
我选择了position: fixed;，所以滚动不会成为问题。
【讨论】：
【参考方案2】：这对我有用。正在进行一个不错的延迟操作。
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);
简单明了
【讨论】：
他的答案是提供一些新的东西，一种阻尼效果【参考方案3】：DIV不能跟随光标，但是移动光标时可以画DIV！
$(document).on('mousemove', function(e)
$('#your_div_id').css(
left: e.pageX,
top: e.pageY
);
);
那个 div 必须不浮动，所以应该设置position: absolute。
【讨论】：
我无法正常工作。使用纯 jQuery 解决方案而不是.css() 最终为我工作。在函数内部，改用这一行：$('#your_div_id').offset(left: e.page, top: e.pageY);
不错的演示 @Reigel ！我对其进行了一些修改以显示一条水平线（jsfiddle.net/rg8S8）。我打算用它来帮助人们阅读图表（它们是 png 图像，所以我无法自动将值显示为文本）。它应该比“目测”值更好。
@jAndy 当 div 在父 div 中时是否可以这样做？那么当用户使用父/容器 div 移动鼠标时......子 div 在容器内移动？
这个解决方案太可怕了！首先，它使用 jQuery，但其次，设置 top 和 left 效率非常低，因为它们会导致重绘。谷歌和其他人都推荐使用 transform: translate，因为它不会导致重绘和从现有的 GPU 缓冲区中绘制。我知道这个答案已有 9 年历史，但至少 EDIT 它。更多信息在这里：html5rocks.com/en/tutorials/speed/high-performance-animations以上是关于jQuery - 用 DIV 跟随光标的主要内容，如果未能解决你的问题，请参考以下文章
各位帅哥，jQuery怎么获取可编辑div的光标的位置或者索引？ 急急急 。。。。
jquery在contenteditable div中设置光标位置