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});
});

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

Full fiddle here

谢谢!

Answer 1

偏移量

要在 jQuery 中访问这些 offsetLeft 和 offsetTop 属性，您应该使用 player.offset().top 和 player.offset().left。这是 jQuery docs for the offset function.只是尝试访问该对象的 offsetLeft 或 offsetTop 属性会产生未定义的结果，这会使您的 Angular 计算失败。

图像方向

修复该问题后，汽车将不会指向正确的方向(偏离 90 度)。您可以更改图像文件的旋转，也可以将该调整插入到 Angular 计算函数中。