В этой статье я расскажу о бегущем тексте, на html страничках. А точнее, я расскажу как делать такие эффекты с помощью JavaScript. И прочитав эту статью, ты сможешь сделать бегущий текст на своей паге. Я постараюсь рассказывать только то, что необходимо для тебя. Потому что, я всегда, когда читаю обучающие книги просто засыпаю или оставляю книги до лучших времен =) т.к. в книгах пишут много лишнего. Они думают что пишут эти книги для полных чайников, или просто они и есть эти самые чайники :). И я всегда переписываю то, что мне нужно, а все остальное пусть читает кто-нибудь другой. Ну что, приступим к делу.
Сначала тебе потребуется простой, текстовый редактор. Тут идеально подходит виндовозный нотепад. Давай открывай его и долби следующее:
Если ты не знаком с html, то придется объяснять, что это значит. А если ты его знаешь, то можешь пропустить следующий пункт. Ну я начинаю объяснять, что значить эти строки.
<html> и </html> эти теги показывают браузеру, что эта страничка является html страничкой, а не какой-нибудь другой. И весь текст в html файлах заключается в эти теги. Первый тег, открывающий а второй, со знаком /, закрывающий.
<head> и </head> это тоже специальные теги, между которыми пишутся другие теги, в которых тоже могут быть теги :). Не обращай внимания на смайлик, я серьезно. А какие теги пишутся между этими тегами, ты узнаешь в процессе обучения, т.к. все я описать сейчас не смогу.
<title>моя пробная страница</title> А вот и первые теги, которые пишутся между <head></head>. Эти теги предназначены для надписи заголовка на окне браузера.
<body>и</body> Между этими тегами ты будешь писать события для запуска функций JavaScript. И еще многое другое.
Ну а теперь хватит рассматривать html теги, ведь не за этим ты сюда пришел. Сейчас мы начинаем учить JavaScript. Сейчас добавь в написаное то, что написано у меня, а я потом расскожу.
<html> <head> <title>моя пробная страница</title> <script language="JavaScript"> //Начало оно и в африке начало :) <!--Прячемся от чужих глаз
Как ты уже заметил, мы добавили несколько строк в прошлый текст. Сейчас я расскажу что они значат.
<script language="JavaScript"> эта вот фигня говорит о том, что начинается текст скрипта. А строчки language="JavaScript" говорят о том, что скрипт является JavaScript'ом, а не другим.
//Начало оно и в африке начало :) все что идет после двойного слеша в строке, это комментарий. Он не отображается в браузере и не интерпретируется браузером. Комментарии пишутся для понимания кода в дальнейшем.
<!--Прячемся от чужих глаз и //Хватит прятаться--> Ну тут все понятно. Так ведь? <!--и --> эти знаки скрывают текст, который написан между этими знаками.
А теперь надо написать вот такой текст:
function moveTxt( ) { if (ani1.style.pixelTop< 500) { ani1.style.pixelTop +=3; setTimeout("moveTxt()", 50); } }
Такой текст тебе надо написать между <!--Прячемся от чужих глаз и //Хватит прятаться-->. Но это еще не все, еще надо сделать так, чтобы эта функция запускалась при загрузке страницы. Ну и конечно же нужно написать сам текст. То что я только что написал, я объяснять пока не буду. А расскажу чуть позже.
Теперь в тег <body> надо добавить onLoad="moveTxt()" должно получиться <body onLoad="moveTxt()">.
Теперь надо обьяснить то, что здесь происходит. Строка onLoad="moveTxt()" которая завалялась между <body>и</body> В этой строке написано событие, которое грузит функцию moveTxt() при старте страницы. Это событие называется onLoad, если ты знаком хотя бы с одним языком программирования, то тебе это должно быть знакомо.
А следующая строка <div id="ani1" style="position:absolute; left: 500; top: 10"> показывает, что текст который мы написали ниже будет называться ani1 и потом устанавливает позицию ani1 то есть нашего текста. Далее идет сам текст и тег закрывается </div>.
Теперь я расскажу что же написано в самой функции. Первая строка function moveTxt( ) Это объявление функции. Т.е. ты объявил функцию moveTxt( ). Потом пишется открывающаяся фигурною скобка, эта скобка обозначает, грубо говоря, начало какого то действия. Это тоже самое, что в delphi begin.
Следующая строка if (ani1.style.pixelTop< 500) означает, что если условие ani1.style.pixelTop< 500 верное, то будет выполняться действие. А если будет выше 500, то действие остановиться.
Потом идет строка ani1.style.pixelTop +=3; Это значит, что при каждом выполнении этой функции позиция текста будет меняться на 3 пикселя.
setTimeout("moveTxt()", 50); А эта чудА строка заставляет выполнять нашу функцию каждые 50 миллисекунд, пока значение не станет ложным. Ну и закрывающиеся фигурные скобки значат, что действие закрываеться
