jQuery -使用DIV键跟随光标
jQuery -使用DIV键跟随光标
提问于 2010-08-02 15:49:31
如何使用jQuery通过DIV跟踪光标？
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-08-02 15:53:15
您不能使用DIV跟随光标，但您可以在移动光标时绘制DIV！
$(document).on('mousemove', function(e){
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
});该div必须不在浮动范围内，因此应设置position: absolute。
Stack Overflow用户
发布于 2015-05-04 19:12:45
你不需要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;，所以滚动不是问题。
Stack Overflow用户
发布于 2013-10-31 21:54:31
这对我很有效。有一个不错的延迟动作正在进行。
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);又好又简单
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3385936
复制相关文章
相似问题