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属性产生了未定义，这使得角度计算失败。

图像方向

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

按照鼠标指针使图像旋转

1 个答案:

偏移

图像方向