Переместите изображение в соответствии с мышью, используя jquery

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

Но даже если мне удастся передать эти значения другим клиентам, использующим php, как я могу его эмулировать? Можно ли переместить небольшое изображение указателя на основе координат, полученных от докладчика?

  1. Есть ли какие-либо функции или фрагменты, с которых я не могу начать?
  2. Будет ли это очень трудоемкой задачей, с которой могут столкнуться нормальные люди?
  3. Это лучший способ достичь того, чего я пытаюсь достичь?
Источник

3 ответа

Решение

Ну, вы можете переместить изображение с помощью .css

такие как:

$(window).mousemove(function(event) {
  $("#image").css({"left" : event.pageX, "top" : event.pageY});
});

просто установить #image фиксированным или абсолютным

  1. выше

  2. Это не очень аппаратно интенсивно на всех. Пока вы используете .css и не .animate

  3. Это, наверное, самое простое и надежное решение

Источник

На самом деле это было сделано с помощью учебника, включенного в Node.js и websockets. (обратите внимание, что на самом деле вы не видите никаких других курсоров, так как этот пост довольно старый, но вы можете увидеть себя с помощью другого компьютера / браузера).

Вы говорите, что хотите использовать PHP, и вы, вероятно, можете портировать его код node.js на php. Вот библиотека, чтобы помочь с веб-сокетами в php.

Источник

Создайте изображение на странице с помощью доски в браузере зрителей. Установите стиль изображения в положение: абсолютное и из javascript установите верхнее и левое свойства в соответствии с положением от мыши докладчиков. Используйте setInterval, чтобы выполнить вызов javascript к серверу и получить позицию мыши для докладчиков. На компьютере докладчиков также необходимо использовать setInterval, чтобы сохранить положение мыши на сервере.

Источник
Другие вопросы по тегам