跟隨鼠標指針旋轉圖像

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屬性會產生undefined，這使角度計算失敗。

影像方向

解決此問題后，汽車將無法指向正確的方向（偏離90度）。 您可以更改圖像文件的旋轉，也可以將調整插入角度計算功能。