我想用
javascript制作一些东西,我得到的图像是一个轨道,4个人从轨道的左边跑到右边.所以基本上他们需要做的就是向右移动.
当我点击一个按钮时,我正试图将图像向右移动.看到我设法移动图像,但当我复制该功能时,它只会为最后一个图像.
我试过不同的东西
>所以我试图改变每个函数的所有变量,但它仍然只会移动最后一个图像.
>我试图把If语句但我不知道它们究竟是如何工作的,所以这可能有效,但我无法使它工作.
>我也对函数init()进行了一些研究,我完全不理解,但我尝试改变它,但我不能使它工作
码
<script type="text/javascript"> var imgObjgroen = null; function init(){ imgObjgroen = document.getElementById('lopergroen'); imgObjgroen.style.left = '35px'; } function moveGreenRight(){ imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px'; } var imgObjrood = null; function init(){ imgObjrood = document.getElementById('loperrood'); imgObjrood.style.left = '35px'; } function moveRedRight(){ imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px'; } var imgObjgeel = null; function init(){ imgObjgeel = document.getElementById('lopergeel'); imgObjgeel.style.left = '35px'; } function moveYellowRight(){ imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px'; } var imgObjblauw = null; function init(){ imgObjblauw = document.getElementById('loperblauw'); imgObjblauw.style.left = '35px'; } function moveBlueRight(){ imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px'; } window.onload =init; </script>
<div id="wrap"> <img id="baan" src="baan.png"> <img id="lopergroen" src="lopergroen.png"> <img id="loperrood" src="loperrood.png"> <img id="lopergeel" src="lopergeel.png"> <img id="loperblauw" src="loperblauw.png"> </div> <button id="lopergroenbutton" onclick="moveGreenRight();">groen</button> <button id="loperroodbutton" onclick="moveRedRight();">rood</button> <button id="lopergeelbutton" onclick="moveYellowRight();">geel</button> <button id="loperblauwbutton" onclick="moveBlueRight();">blauw</button>
谢谢,抱歉我的英语不好.
解决方法
您应该有一个初始化函数来初始化所有图像处理程序
var imgObjgroen = null; var imgObjrood = null; var imgObjgeel = null; var imgObjblauw = null; function init(){ imgObjblauw = document.getElementById('loperblauw'); imgObjblauw.style.left = '35px'; imgObjgeel = document.getElementById('lopergeel'); imgObjgeel.style.left = '35px'; imgObjrood = document.getElementById('loperrood'); imgObjrood.style.left = '35px'; imgObjgroen = document.getElementById('lopergroen'); imgObjgroen.style.left = '35px'; } function moveGreenRight(){ imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px'; } function moveRedRight(){ imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px'; } function moveYellowRight(){ imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px'; } function moveBlueRight(){ imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px'; } window.onload =init;
<div id="wrap"> <img id="baan" src="baan.png"> <img id="lopergroen" src="lopergroen.png"> <img id="loperrood" src="loperrood.png"> <img id="lopergeel" src="lopergeel.png"> <img id="loperblauw" src="loperblauw.png"> </div> <button id="lopergroenbutton" onclick="moveGreenRight();">groen</button> <button id="loperroodbutton" onclick="moveRedRight();">rood</button> <button id="lopergeelbutton" onclick="moveYellowRight();">geel</button> <button id="loperblauwbutton" onclick="moveBlueRight();">blauw</button>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。