Bymas | Помощь с кодом.

Тема закрыта by

Adrenalin
Причина: Спасибо, помогли.

Ребята кто не спит. Подскажите почему при нажатии на кнопку пропадает картинка вобще. Судя по логике она должна пойти в правый угол экрана и обратно. Но увы такого нету. В чем проблема кто знает?

<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: url(./ikon/img.jpg);
}
#myAnimation {
width: 5px;
height: 5px;
position: absolute;

}
#myAnimation1 {
width: 5px;
height: 5px;
position: absolute;

}

</style>
<body>

<p>
<button onclick="myMove()"> <img src="./img.png" width="50px;" height="50px;"></button>
</p>

<div id ="myContainer">
<div id ="myAnimation"><div id ="myAnimation1"><img src="./ikon/echo.png"></div>
</div>
</div>

<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 30);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>

<script>
function myMove() {
var elem = document.getElementById("myAnimation1");
var pos = 350;
var id = setInterval(frame, 30);
function frame() {
if (pos == 1) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.right = pos + 'px';
}
}
}
</script>

</body>
</html>

Adrenalin ,
Так что ли нужно было?

<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: url(./ikon/img.jpg);
}
#myAnimation {
width: 5px;
height: 5px;
position: absolute;

}
#myAnimation1 {
width: 5px;
height: 5px;
position: absolute;

}

</style>
<body>

<p>
<button onclick="myMove()"> <img src="./img.png" width="50px;" height="50px;"></button>
</p>

<div id ="myContainer">
<div id ="myAnimation"><div id ="myAnimation1"><img src="./ikon/echo.png"></div>
</div>
</div>

<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 30);
function frame() {
if (pos == 350) {
clearInterval(id);
myMoveMinus();
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}

function myMoveMinus() {
var elem = document.getElementById("myAnimation");
var pos = 350;
var id = setInterval(frame, 30);
function frame() {
if (pos == 0) {
clearInterval(id);
myMove();
} else {
pos--;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>

<script>
function myMove2() {
var elem = document.getElementById("myAnimation1");
var pos = 350;
var id = setInterval(frame, 30);
function frame() {
if (pos == 1) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.right = pos + 'px';
}
}
}
</script>

</body>
</html>

Мистика , оуу да. Большое спасибо)))

Мистика , только поидее к исходной точки дойдя он должен был остановиться

Adrenalin ,
<!DOCTYPE html>
<html>
<style>
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: url(./ikon/img.jpg);
}
#myAnimation {
width: 5px;
height: 5px;
position: absolute;

}
#myAnimation1 {
width: 5px;
height: 5px;
position: absolute;

}

</style>
<body>

<p>
<button onclick="myMove()"> <img src="./img.png" width="50px;" height="50px;"></button>
</p>

<div id ="myContainer">
<div id ="myAnimation"><div id ="myAnimation1"><img src="./ikon/echo.png"></div>
</div>
</div>

<script>
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 30);
function frame() {
if (pos == 350) {
clearInterval(id);
myMoveMinus();
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}

function myMoveMinus() {
var elem = document.getElementById("myAnimation");
var pos = 350;
var id = setInterval(frame, 30);
function frame() {
if (pos == 0) {
clearInterval(id);
} else {
pos--;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>

Мистика , отлично, то что нужно. Целую ваши руки от удовольствия))) благодарю с улыбкой