用箭头键更改图片？

我有一个图像，用箭头键在屏幕上移动。我想知道如何更改每个键移动的图像。用箭头键更改图片？

我意识到图像是附加到每个运动。这些动作并不附在每张图片上。

以下是我有：

<script type="text/javascript"> 

function leftArrowPressed() {var element = document.getElementById("image1"); 
element.style.left = parseInt(element.style.left) - 10 + 'px';} 

function rightArrowPressed() {var element = document.getElementById("image1"); 
element.style.left = parseInt(element.style.left) + 10 + 'px';} 

function upArrowPressed() {var element = document.getElementById("image1"); 
element.style.top = parseInt(element.style.top) - 10 + 'px';} 

function downArrowPressed() {var element = document.getElementById("image1"); 
element.style.top = parseInt(element.style.top) + 10 + 'px';} 


function moveSelection(event) {      
switch (event.keyCode) { 
case 37:leftArrowPressed();break; 
case 39:rightArrowPressed();break; 
case 38:upArrowPressed();break; 
case 40:downArrowPressed();break; 
} 
}; 


function gameLoop() 
{ 
// change position based on speed 
moveSelection(); 
setTimeout("gameLoop()",10); 
} 

</script> 
</head> 

<body onload="gameLoop();" onkeydown="moveSelection(event)" onkeyup="moveSelection(event)"'> 

<img id="image1" src="images/casual.png" style="position: absolute; left: 15; right: 15; top: 15; bottom: auto; " height="20" width="16"> 
</body>

来源

2015-09-06 Matthew

你的意思只是改变它的来源：' element.src =“newImage.png”'？如果是这样，只需在每个'ArrowPressed（）'函数中执行该操作。 –

我以V31的方式尝试过这种方式，但尽管我的图像现在改变了，但它们不再移动。 – Matthew

因为答案删除了该功能，只需执行我在我的评论中提到的内容即可。 –

在你的每一个ArrowPressed()功能简单地改变元素的src到你想要的每一个箭头键：

function downArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.top = parseInt(element.style.top) + 10 + 'px'; 
    element.src = "imageForDownArrow.png"; 
} 

function upArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.top = parseInt(element.style.top) - 10 + 'px'; 
    element.src = "imageForUpArrow.png"; 
} 

function leftArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.left = parseInt(element.style.left) - 10 + 'px'; 
    element.src = "imageForLeftArrow.png"; 
} 

function rightArrowPressed() { 
    var element = document.getElementById("image1"); 
    element.style.left = parseInt(element.style.left) + 10 + 'px'; 
    element.src = "imageForRightArrow.png"; 
}

来源

2015-09-06 03:58:44

您需要更改按键img标签的src属性。创建了一个小demo来演示相同。

代码：

function changeImage() { 
    document.getElementById("image1").src = "http://andrefrommalta.com/wp-content/uploads/2014/09/137392976177.jpg"; 
} 

function changeImage2() { 
    document.getElementById("image1").src = "http://3.bp.blogspot.com/_IY7CmWJmPL4/R8K5bFaKXpI/AAAAAAAABO0/fH7E6kPibuM/S1600-R/random.jpg"; 
} 

function changeImage3() { 
    document.getElementById("image1").src = "http://www.newton.ac.uk/files/covers/968361.jpg"; 
} 

function changeImage4() { 
    document.getElementById("image1").src = "http://k41.kn3.net/taringa/1/7/0/5/5/4/74/gatessb/E6F.gif?3362"; 
} 

function checkKey(e) { 

    e = e || window.event; 

    if (e.keyCode == '38') { 
     //up arrow 
     changeImage(); 
    } else if (e.keyCode == '40') { 
     // down arrow 
     changeImage2(); 
    } else if (e.keyCode == '37') { 
     // left arrow 
     changeImage3(); 
    } else if (e.keyCode == '39') { 
     // right arrow 
     changeImage4(); 
    } 

} 

document.onkeydown = checkKey;

来源

2015-09-06 03:15:30 V31

图像现在不移动。 – Matthew

用箭头键更改图片？

回答

相关问题