[jquery] jQuery-DIV로 커서 따라 가기

Program / 글쓴이

jQuery를 사용하여 DIV로 커서를 따라갈 수 있습니까?

답변

으로 커서를 따라갈 수 없지만 커서를 움직일 때 DIVa를 그릴 수 있습니다 DIV!

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

그 div는 float에서 떨어져 position: absolute있어야하므로 설정해야합니다.

답변

이를 위해 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;스크롤이 문제가되지 않도록 선택했습니다 .

답변

이것은 나를 위해 작동합니다. 좋은 지연된 행동이 진행되고 있습니다.

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

멋지고 단순한

답변