0

コード：

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

画像はマウスに従います。回転させたいだけです。

フルフィドルはこちら

ありがとう！

4

1 に答える 1

1

オフセット

jQuery でこれらの offsetLeft および offsetTop プロパティにアクセスするには、player.offset().top および player.offset().left を使用する必要があります。オフセット関数の jQuery ドキュメントは次のとおりです。そのオブジェクトの offsetLeft または offsetTop プロパティにアクセスしようとすると、未定義が生成され、角度の計算が失敗していました。

画像の向き

それを修正すると、車は正しい方向を向いていません (90 度ずれています)。画像ファイルの回転を変更するか、その調整を角度計算関数に挿入することができます。

于 2013-10-26T20:07:51.647 に答える