Q&A
コードの貼り付けがちゃんとできていないようですので、やり直してください。
左画像を右移動 右下の画像を左移動させ続けたいです
右下の子が動かない理由がわからなくて教えていただけると嬉しいです。
HTML
<html> <head> <meta charset="utf-8"> <title>マウス君</title> <script src="mousekun.js"></script> </head> <body> <p><input type="button" value="実行" onclick="mousekunMove()"></p> <p><input type="button" value="停止" onclick="mousekunStop()"></p> <img src="imgM1.gif" border="0" id="img1" style="position:absolute"><img src="imgM2.gif" border="0" id="img2" style="position:absolute" >
<style> #img2 {position:absolute; right:10px; bottom:1px; } </style> </body> </html>javascript
var timer1, timer2;
var i;
var imgLeftStart = 0;
var imgLeftEnd = 500;
var imgLeft = imgLeftStart;
var imgTop =100;
var moveStep = 5;
var moveSpeed = 100;
//マウス君の移動
function mousekunMove() {
timer1= setInterval("rightMove()",50);
timer2=setInterval("leftMove()",50);
}
//マウス君停止
function mousekunStop() {
clearInterval(timer1);
}
//右に移動
function rightMove() {
imgLeft += moveStep;
if(imgLeft > imgLeftEnd){
imgLeft = imgLeftStart;
}
document.getElementById("img1").style.top=imgTop;
document.getElementById("img1").style.left=imgLeft;
}
//左に移動
function leftMove(){
imgRight += moveStep;
if(imgRight > imgRightEnd){
imgRight = imgRightStart;
}
document.getElementById("img2").style.bottom=imgBottom;
document.getElementById("img2").style.right=imgRight;
}
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
あと質問内「Java」と書かれていますが、「Java」と「JavaScript」は全く別物ですのでご注意を。
ありがとうございます。Javaとjavascript って別物なんですね。丁寧にありがとうございます。
具体的にはどうしたらいいでしょうか？
回答1件
0
ベストアンサー
質問を整形してほしくて修正依頼しましたが、まあわかったのでいいです。
いくつかコードの誤りを見つけました。
JavaScriptの変数 imgRight imgRightEnd imgRightStart imgBottom が宣言されていません。
HTML内に img2 に対するスタイルを記述していますが、これはたぶん #img2 ですね。
そして #img1 に対するスタイルの指定がありません。
document.getElementById("img1").style.left=imgLeft; などとしているのは、
document.getElementById("img1").style.left=imgLeft + "px"; にしないと、たぶん期待通りにならないと思います。
投稿2021/05/05 07:59
総合スコア8402
あなたの回答
tips
プレビュー
