好的,所以我制作了一个可以使用箭头键移动图像的页面,但只有向下和向右功能有效。我从一个隐藏显示脚本中制作了这些功能,因为我对 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
实际页面在这里