0

好的，所以我制作了一个可以使用箭头键移动图像的页面，但只有向下和向右功能有效。我从一个隐藏显示脚本中制作了这些功能，因为我对 javascript 非常陌生。

这是代码。

剩下

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

您可以在arrow.zip下载 html

实际页面在这里

4

3 回答 3

3

你应该只用topand来定位它left，因为如果你试图以你正在做的方式来做，你最终会得到非常混乱的属性，比如 atop是 5 但 abottom是 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">. 后一种形式已被弃用。

于 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 回答