javascript - 跟随鼠标指针使图像旋转

Question

编码：

$(document).ready(function(){
    var player = $('#player');
    //Checks to see which key is pressed down

    $(window).on('mousemove', function (e) {

      //Current position
      var p1 = {
        x: player.offsetLeft,
        y: player.offsetTop
      };

      //Future position
      var p2 = {
        x: e.offsetX,
        y: e.offsetY
      };

      //Angle between them in degrees
      var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;

      if(angleDeg >= 360){
        angleDeg -= 360;
      }


        player.css('-webkit-transform', 'rotate(' + angleDeg + 'deg)');
    });
});

什么都没发生。如果我写类似：

$(document).mousemove(function(e){
    $("#player").css({left:e.pageX, top:e.pageY});
});

图像跟随鼠标。我只想让它旋转。

完整的小提琴在这里

谢谢！

Answer 1

抵消

要在 jQuery 中访问这些 offsetLeft 和 offsetTop 属性，您应该使用 player.offset().top 和 player.offset().left。这是offset 函数的 jQuery 文档。只是试图访问该对象的 offsetLeft 或 offsetTop 属性会产生未定义，这会使您的角度计算失败。

图像方向

一旦你解决了这个问题，汽车就不会指向正确的方向（它偏离了 90 度）。您可以更改图像文件的旋转，也可以将该调整插入到角度计算函数中。