Как управлять курсором с помощью 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. Если что-то непонятно - пишите. Сделаю любой каприз скрипт для вашего и не только сайта.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, javascript, курсор




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Урок 11. Операторы сравнения в C#
Как наложить текст на изображение на C#
Самые важные навыки программиста