Переместить изображение по координатам мыши с помощью jquery

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

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

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

javascript html jquery whiteboard mouse-position
person esafwan    schedule 18.07.2011    source источник

Ответы (3)


arrow_upward
5
arrow_downward

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

такие как:

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

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

  1. выше

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

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

person switz    schedule 18.07.2011
comment
Без проблем. Я только что опубликовал точно такой же код, как и вы, со ссылкой на эту скрипку, но вы добрались до нее первыми! - person James Allardice; 18.07.2011
comment
Если вам нужно, чтобы он перемещался туда медленно, а не мгновенно, измените .css на .animate. - person Nick Gallimore; 27.09.2018

arrow_upward
2
arrow_downward

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

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

person helloandre    schedule 18.07.2011

arrow_upward
0
arrow_downward

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

person nivs1978    schedule 05.08.2016