HTML и Java-скрипт, который перемещает объект с помощью клавиш со стрелками? - PullRequest
Новая
       9

HTML и Java-скрипт, который перемещает объект с помощью клавиш со стрелками?

0 голосов
/ 10 марта 2011

Хорошо, поэтому я создал страницу, на которой можно перемещать изображение с помощью клавиш со стрелками, но работают только функции «вниз» и «вправо».Я сделал функции из скрипта скрытия шоу, потому что я очень плохо знаком с javascript.

Вот код.

left 

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

right 

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

Фактическая страница здесь

Ответы [ 3 ]

3 голосов
/ 10 марта 2011

Вы должны позиционировать его только с top и left, потому что если вы попытаетесь сделать это так, как вы это делаете, вы получите очень испорченные свойства, такие как top скажем 5, но bottom скажем 100.

Кроме того, вы должны использовать единицу измерения, предпочтительные пиксели, для свойств 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">. Последняя форма устарела.

2 голосов
/ 10 марта 2011 
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, легко изменить. Вам нужен только левый и верхний стиль.

Редактировать: моя ошибка - строковые значения должны быть внутри "". Числовые значения - не нужны.

0 голосов
/ 10 марта 2011

Вместо установки свойства .right вычтите сумму из свойства .left.Это работает для меня.Кроме того, попробуйте оптимизировать свой код - ваше предложение if делает то же самое в части if и в части else ...

...