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слід встановити.

— jAndy
джерело

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;прокрутка не буде проблемою.

— волохатий юпі
джерело

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

Приємно і просто

— Уллер
джерело

2

Його відповідь надає щось нове, демпфуючий ефект

— Йона