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

Question

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

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

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

Answer 1

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

, таких как:

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

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

1. выше

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

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

Answer 2

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

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

Answer 3

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