大家好,我目前正在制作一些 Angular 色扮演游戏。我想用箭头移动我的 Angular 色。现在正在工作。但是我想在单击右箭头时更改图像。现在,当我使用此代码单击向右箭头时:
function rightArrowPressed() {
var element = document.getElementById("image1").src = "/img/run_1.png";
element = document.getElementById("image1");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
图像更改为 run_1.png
并且保持原样。不仅仅是图像以一个姿势滑动。单击右箭头时如何再次更改图像?
HTML
<img id="image1" src="{{Auth::user()->char_image}}" style="position:absolute;left:0; top:0;height: 45px; image-rendering: -webkit-optimize-contrast;">
最佳答案
您可以使用计数器变量:
var counter = 0;
function rightArrowPressed() {
counter = (counter === 4) ? 1 : counter+1;
var image = "/img/run_"+counter+".png";
var element = document.getElementById("image1");
element.src = image;
var left = parseInt(element.style.left)+5;
element.style.left = left + "px";
}
这样一来,每次您右键单击时,都会使用不同的图像。
关于JavaScript 移动字符。单击右箭头更改图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45310776/