Web-урок #10

На предыдущем уроке мы познакомились с функцией, которая вызывает циклично-повторяющийся скрипт, давайте с помощью этой функции заставим картинку перемещаться на 10 пикселей вправо через каждые 100 миллисекунд. Таким образом она у нас поедет.

Итак, в HTML добавим машинку, а в CSS отредактируем её размер и поставим её в левый кран экрана. Внимание!!!! Если вдруг, ты не можешь сделать этого самостоятельно, обязательно вернись и перечитай первые уроки нашего курса. Без основ никуда!!!

тачка.html

<img name ='img' src ="тачка.png">
<link rel="stylesheet" href="style.css">
<script src = "script.js"></script>

style.css

img
{
  width: 700px;
  height: 300px;
  margin-top: 33%;
}

script.js

var x=10;
window.onload = function(){
	window.setInterval(function(){
	 img.style.marginLeft = x + "px";
         x=x+10;
	}, 100);
};

Код на JavaScript запустится сразу после загрузки окна, он будет запускать скрипт, который меняет отступ img от левого края экрана на 10 пикселей через каждые 100 миллисекунд.

Если этот урок показался тебе слишком легким, добавь на экран фон, а также сделай так, чтобы машинка разворачивалась и ехала назад, после того как достигнет правого края экрана. Удачи!!!