jQuery-用DIV跟随光标

79

如何使用jQuery用DIV跟随光标？

jquery html cursor

— 彼得
source

140

您不能在光标后跟随一个DIV，但是DIV在移动光标时可以绘制一个！

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

该div必须不在浮动范围内，因此position: absolute应进行设置。

— 安迪
source

11

我在使其正常工作时遇到了一些麻烦。使用纯jQuery解决方案而不是.css()最终为我工作。在函数内部，请改用此行： $('#your_div_id').offset({left: e.page, top: e.pageY});

— Brad 2012年

1

不错的演示@Reigel！我对其进行了一些修改以显示一条水平线（jsfiddle.net/rg8S8）。我正计划使用它来帮助人们阅读绘图（它们是png图像，因此我无法做很多事情来自动将值显示为文本）。它应该比“盯眼”值好得多。

— Tim Swast 2012年

2

@jAndy是否可以在div位于父div中时执行此操作？所以当用户用父/容器div移动鼠标...子div在容器内移动时？

— 基督山（MonteCristo）2012年

这个解决方案太可怕了！首先，它使用jQuery，但第二，设置top和left效率很低，因为它们会导致重新绘制。Google和其他所有人都建议使用transform：translation，因为那不会导致重新绘制和从现有GPU缓冲区绘制。我知道这个答案已经9岁了，但至少要编辑它。此处的更多信息：html5rocks.com/en/tutorials/speed/high-performance-animations

— DavidsKanal

19

您不需要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;所以滚动不会成为问题。

— 毛茸茸的雅皮
source

15

这对我有用。有一个很好的延迟动作正在进行。

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

尼斯和简单

— 乌勒
source

2

他的回答是提供新的阻尼效果

— 约拿（Jonah）2014年