На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Как управлять курсором с помощью 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, курсор





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




Статьи IT
JS: сложение иногда совсем не сложение


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.