Как управлять курсором с помощью JS

Если у вас возникла задача управлять курсором пользователя в браузере, то именно эта статья вам нужна. В ней мы разберем один из способов решить данную задачу, при этом задействуем чистый JavaScript, без каких-либо библиотек.

Небольшое вступление. Перехватить курсор с помощью JS мы не можем – это требования безопасности, но мы можем скрыть его и имитировать движение с помощью картинки – а для обычного пользователя не будет никакой разницы.

Согласно спецификации CSS у курсора можно установить значение none:

body {
cursor: none;
}

Теперь на страничке, где прописано данное правило, курсор перестанет отображаться. Проверьте:



Однако, нам еще надо бы заставить его двигаться. Самим курсором мы управлять не в состоянии (это требование безопасности), но что нам мешает нарисовать картинку и передвигать её так, как хочется? Ничего.

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

<img src="cursor.png" id="curs"/>

Но картинка у нас неподвижна, надо заставить её двигаться. Пишем простую функцию на JS:

var x = 140;
var y = 50;

function haos () {
x = x + Math.floor(Math.random()*(20))- 10;
y = y + Math.floor(Math.random()*(20))- 10;
document.getElementById("curs").style="left:"+x+"px; top:"+y+"px";
}

setInterval(' haos ();', 500);

x, y – координаты нашего «заменителя» курсора. В этой функции курсор перемещается вправо-влево, вверх-вниз хаотично на расстояние максимум 10 пикселей каждые пол секунды:
Запустить Но мы же хотим, чтобы он двигался в нужном нам направлении? Делаем и это:

function anim () {
if (x>40) {
x-=2;
document.getElementById("curs").style="left:"+x+"px; top:"+y+"px";
}
if (y>10) {
y-=2;
document.getElementById("curs").style="left:"+x+"px; top:"+y+"px";
}

setInterval('anim();', 50);

Теперь картинка стремится в верхний угол, в котором у нас уже добавлена ссылка:

<a href="https://upread.ru" id="up">Программы на заказ</a>

Запустить Но курсор дошел до ссылки и что? Правильно, надо, чтобы он кликнул по ссылке. Добавляем:

var flag = 0;
if ((x<=40) && (y<=15) && (flag==0)) {
flag = 1;
document.getElementById("up").click();
}

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

document.getElementById("curs").src="pointer.png";

В итоге у нас получится такая картина:

Запустить

Если создать расширение для браузера, то можно заставить выполняться данный скрипт по имитации курсора на любом сайте. Или как вариант можно использовать Tampermonkey. Если что-то непонятно - пишите. Сделаю любой каприз скрипт для вашего и не только сайта.
заметки, javascript, курсор