0

わかりましたので、矢印キーで画像を移動できるページを作成しましたが、下と右の機能しか機能しません。私はjavascriptが初めてなので、hide showスクリプトから関数を作成しました。

これがコードです。

左

function left(id) { 
    var y = '5';
    var z =document.getElementById(id).style.left;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.left;
        if (state == '1') {
            document.getElementById(id).style.left = x;
        } else {
            document.getElementById(id).style.left = x;
        }
    }

右

function right(id) { 
    var y = '5';
    var z =document.getElementById(id).style.right;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.right;
        if (state == '1') {
            document.getElementById(id).style.right = x;
        } else {
            document.getElementById(id).style.right = x;
        }
    }

上

function up(id) { 
    var y = '5';
    var z =document.getElementById(id).style.bottom;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.bottom;
        if (state == '1') {
            document.getElementById(id).style.bottom = x;
        } else {
            document.getElementById(id).style.bottom = x;
        }
    }

下

function down(id) { 
    var y = '5';
    var z =document.getElementById(id).style.top;
    var x = parseInt(y)+parseInt(z);
    var state = document.getElementById(id).style.top;
        if (state == '1') {
            document.getElementById(id).style.top = x;
        } else {
            document.getElementById(id).style.top = x;
        }
    }

次に、矢印キーのスクリプト

document.onkeyup = KeyCheck;       
function KeyCheck() {

 var KeyID = event.keyCode;

  switch(KeyID)
  {

  case 37:

  right('img');

  break;

  case 38:

  up('img')

  break

  case 39:

  left('img');

  break;

  case 40:

  down('img');

  break;
  }
  }

そしてhtml

<img id="img" src="http://trevorrudolph.com/logo.png" style="position:absolute; left:1; bottom:1; right:1; top:1;">

html はarrow.zip からダウンロードできます。

実際のページはこちら

4

3 に答える 3

3

と でのみ配置する必要があります。これは、現在の方法で実行しようとすると、 が 5 であるのに が 100 であるなど、非常にめちゃくちゃなプロパティになってしまうtopためです。lefttopbottom

また、topおよびleftプロパティには、単位 (好ましいピクセル) を使用する必要があります。

したがって、実際に行う必要があるのは、関数を次のように変更することだけです。

function left(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1; // get just the number and not the units
    document.getElementById(id).style.left = current - 1 + 'px'; // taking advantage of JavaScript's strange but sometimes useful type conversion. The subtraction converts it to an int and the addition converts it back to a string. 
}

function right(id) {
    document.getElementById(id).style.left.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.left = parseInt(current) + 1 + 'px'; // here we can't use that trick
}

function up(id) {
    document.getElementById(id).style.top.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.top = current - 1 + 'px';
}

function down(id) {
    document.getElementById(id).style.top.match(/^([0-9]+)/);
    var current = RegExp.$1;
    document.getElementById(id).style.top = parseInt(current) + 1 + 'px';
}

<script type="text/javascript">また、の代わりに使用する必要があります<script language="JavaScript">。後者の形式は非推奨です。

于 2011-03-09T23:10:20.613 に答える
2 
function move ( id, direction ) {
    var element = document.getElementById(id);
    switch ( direction )
    {
    case "left":  element.style.left += 5; break;
    case "right": element.style.left -= 5; break;
    case "up":    element.style.top += 5;  break;
    case "down":  element.style.top -= 5;  break;
   }
}

あなたのコードを考えてみてください、このように見えます。コードが少なく、getelementbyidが少なく、変更が簡単です。左と上のスタイルだけが必要です。

編集：私の間違い-文字列値は""の中になければなりません。数値-必要ありません。

于 2011-03-09T23:20:59.880 に答える
0

プロパティを設定する代わりに、.rightプロパティから金額を減算し.leftます。これは私のために働きます。さらに、コードを最適化してみてください-あなたの句は、部分と部分ifでまったく同じことをします...ifelse

于 2011-03-09T23:08:47.683 に答える