Как просмотреть изображение как курсор на ощупь?

0

У меня есть мобильный сайт, где мне нужно -in единственное page- для просмотра и скрытия значка при прикосновении. Я хотел бы иметь изображение, которое, когда я касаюсь в случайной точке экрана, появляется там, и когда я прикасаюсь в другом месте экрана, он появляется там, где я сейчас коснулся. Как курсор. Возможно? Вы знаете, как это сделать? Благодарю!

  • 1
    Вы просто хотите разместить изображение там, где когда-либо кто-то трогает, и переместить оригинал, когда они снова касаются?
  • 0
    Вы можете получить координаты X, Y события клика в javascript. Тогда вы можете делать все, что вы хотите с этим.
Показать ещё 3 комментария
Теги:

1 ответ

4
Лучший ответ

Я считаю, что это то, за что ты гонг.

var $img = $('<img/>').attr({
  'id': 'cursor',
  'src': 'http://www.nicenicejpg.com/50'
});

$(document).on('touchstart', function (e) {


  var touch = e.originalEvent.touches["0"];

  $img.css({
    top: touch.clientY - 25,
    left:  touch.clientX - 25,
    display: 'block'
  });

});

$img.appendTo('body');

Вы просто слушаете сенсорный старт на документе и перемещаете изображение в координаты, где произошло событие первого касания touchstart.

Вот небольшая демонстрация: http://jsbin.com/dodipide/6/edit

Кроме того, если вы хотите, чтобы он работал с сенсорным или кликом, вы можете подойти так:

var $img = $('<img/>').attr({
  'id': 'cursor',
  'src': 'http://www.nicenicejpg.com/50'
});

$(document).on('touchstart click', function (e) {

  var normalizedishEvent = e.originalEvent.touches ? e.originalEvent.touches["0"] : e;

  $img.css({
    top: normalizedishEvent.clientY - 25,
    left:  normalizedishEvent.clientX - 25,
    display: 'block'
  });

});

$img.appendTo('body');

Вот сценарий этого: http://jsbin.com/dodipide/7/edit

Поделиться
  • 0
    Он работает на мобильных устройствах? "на ощупь"?
  • 0
    Согласно сенсорной эмуляции Chrome, это так.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню