Як управляти курсором за допомогою js

Як управляти курсором за допомогою JS

Невелике вступ. Перехопити курсор за допомогою JS ми не можемо - це вимоги безпеки, але ми можемо приховати його і імітувати рух за допомогою картинки - а для звичайного користувача не буде ніякої різниці.

Згідно зі специфікацією CSS у курсора можна встановити значення none:

Тепер на сторінці, де прописано дане правило, курсор перестане відображатися. перевірте:

Тут ваш курсор зникає

Однак, нам ще треба б змусити його рухатися. Самим курсором ми управляти не в змозі (це вимога безпеки), але що нам заважає намалювати картинку і пересувати її так, як хочеться? Нічого.

Вставляємо картинку і присвоюємо їй унікальний ідентифікатор:

Але картинка у нас нерухома, треба змусити її рухатися. Пишемо просту функцію на JS:

x, y - координати нашого «замінника» курсору. У цій функції курсор переміщається вправо-вліво, вгору-вниз хаотично на відстань максимум 10 пікселів кожні пів секунди:
запустити

Але ми ж хочемо, щоб він рухався в потрібному нам напрямку? Робимо і це:

Програми на замовлення

Але курсор дійшов до посилання і що? Правильно, треба, щоб він клікнув по посиланню. додаємо:

Ну і заключний штрих: перед переходом по посиланню додаємо зміна src у зображення:

В результаті у нас вийде така картина:

Програми на замовлення

Якщо створити розширення для браузера. то можна змусити виконуватися даний скрипт по імітації курсору на будь-якому сайті. Або як варіант можна використовувати Tampermonkey. Якщо щось незрозуміло - пишіть. Зроблю будь-який каприз скрипт для вашого і не тільки сайту.

Схожі статті