图像应该使用jquery或javascript跟随触摸位置_Javascript_Jquery

图像应该使用jquery或javascript跟随触摸位置

javascript jquery

图像应该使用jquery或javascript跟随触摸位置,javascript,jquery,Javascript,Jquery,我有一个图像，我希望图像移动到任何触摸输入发生的地方。基本上，图像应该充当虚拟光标。我已经为mousemove做过了，但同样的代码不适用于touch-move 期望：在桌面上跟随光标位置的图像，并在触摸设备中遵循触摸位置。您可能需要考虑使用 .[（）] />代码>绑定。 function moveImg(e){ console.log(e); $('img').offset({ left: e.pageX-55, top: e.pageY-45 }); } $(

我有一个图像，我希望图像移动到任何触摸输入发生的地方。基本上，图像应该充当虚拟光标。我已经为mousemove做过了，但同样的代码不适用于touch-move

期望：在桌面上跟随光标位置的图像，并在触摸设备中遵循触摸位置。

您可能需要考虑使用<代码> .[（）] />代码>绑定。

function moveImg(e){
  console.log(e);
  $('img').offset({
    left: e.pageX-55,
    top: e.pageY-45
  });
}

$(document).on({
  mousemove: moveImg,
  touchmove: moveImg
});

请记住，并非所有浏览器都支持

touchmove

：

pageX

和

pageY

似乎是触摸事件的一部分，但如果有超过1个触摸点，则可能会导致一些问题。请参阅更多：

TouchEvent

界面封装了当前处于活动状态的所有触点。

Touch

界面表示单个触摸点，包括触摸点相对于浏览器视口的位置等信息

我会做更多的测试，如果需要的话，稍后会更新答案

更新1

工作示例：

移动示例：

touchmove

事件正在寻找并可能捕获多个接触点。所以为了解决这个问题，我们要检查第一个，忽略另一个

$(function() {
  function log(eObj) {
    var str = eObj.type + " [" + eObj.top + "," + eObj.left + "]";
    $("#results").html(str);
  }

  function moveCursor(e) {
    var p;
    var o = {
      x: 55,
      y: 45
    };
    if (e.type == "mousemove") {
      p = {
        left: Math.round(e.pageX - o.x),
        top: Math.round(e.pageY - o.y),
        type: e.type
      };
    } else if (e.type == "touchmove") {
      var touch = e.changedTouches[0];
      p = {
        left: Math.round(touch.pageX - o.x),
        top: Math.round(touch.pageY - o.y),
        type: e.type
      }
    }
    $('.cursor').css(p);
    log(p);
  }

  $(document).on({
    mousemove: moveCursor,
    touchmove: moveCursor
  });
});

正如您所看到的，

事件.changedTouches

是各种触点及其属性的数组。如果我们关注

event.changedtouchs[0]

，我们可以获得您要查找的

pageX

和

pageY

详细信息

<>希望有帮助。

您可能想考虑使用<代码> .[（）] />代码>绑定。

function moveImg(e){
  console.log(e);
  $('img').offset({
    left: e.pageX-55,
    top: e.pageY-45
  });
}

$(document).on({
  mousemove: moveImg,
  touchmove: moveImg
});