jQuery - следуйте за курсором с помощью DIV

79

Как я могу использовать jQuery, чтобы следовать за курсором с помощью DIV?

jquery html cursor

140

Вы не можете следовать за курсором с помощью a DIV, но вы можете нарисовать a DIVпри перемещении курсора!

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

Этот div должен быть выключен, поэтому position: absoluteдолжен быть установлен.

— Дженди
источник

11

У меня были проблемы с тем, чтобы это работало правильно. Использование чистого решения jQuery вместо того, чтобы .css()работать на меня. Вместо этого внутри функции используйте эту строку: $('#your_div_id').offset({left: e.page, top: e.pageY});

— Брэд,

1

Хорошая демонстрация @Reigel! Я немного изменил его, чтобы показать горизонтальную линию ( jsfiddle.net/rg8S8 ). Я планирую использовать это, чтобы помочь людям читать графики (это изображения png, поэтому я мало что могу сделать, чтобы автоматически отображать значения в виде текста). Это должно работать намного лучше, чем "на глаз" значения.

— Тим Сваст

2

@jAndy, можно ли это сделать, когда div находится в родительском div? поэтому, когда пользователь перемещает мышь с родительским / контейнерным div ... дочерний div перемещается внутри контейнера?

— MonteCristo

Это ужасное решение! Во-первых, он использует jQuery, но, во-вторых, установка сверху и слева очень неэффективна, так как вызывает перерисовку. Google и другие рекомендуют использовать transform: translate, так как это не приведет к перерисовке и отрисовке из существующего буфера графического процессора. Я знаю, что этому ответу 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;так, чтобы прокрутка не была проблемой.

— волосатый яппи
источник

16

У меня это работает. Имеет приятное замедленное действие.

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

Красиво и просто

— Уллер
источник

2

Его ответ дает что-то новое, демпфирующий эффект

— Иона