ГлавнаяРегистрацияВход My-WAP Вторник, 14.08.2018, 22:22
  Статьи Приветствую Вас Гость | RSS

 
 
Главная » Статьи » Програмирование » Java Script

Java Script. Бегущий текст
В этой статье я расскажу о бегущем тексте, на html страничках. А точнее, я расскажу как делать такие эффекты с помощью JavaScript. И прочитав эту статью, ты сможешь сделать бегущий текст на своей паге. Я постараюсь рассказывать только то, что необходимо для тебя. Потому что, я всегда, когда читаю обучающие книги просто засыпаю или оставляю книги до лучших времен =) т.к. в книгах пишут много лишнего. Они думают что пишут эти книги для полных чайников, или просто они и есть эти самые чайники :). И я всегда переписываю то, что мне нужно, а все остальное пусть читает кто-нибудь другой. Ну что, приступим к делу.

Сначала тебе потребуется простой, текстовый редактор. Тут идеально подходит виндовозный нотепад. Давай открывай его и долби следующее:


<html>
<head>
<title>моя пробная страница
</head>
<body>
</body>
</html>

Если ты не знаком с html, то придется объяснять, что это значит. А если ты его знаешь, то можешь пропустить следующий пункт. Ну я начинаю объяснять, что значить эти строки.

<html> и </html> эти теги показывают браузеру, что эта страничка является html страничкой, а не какой-нибудь другой. И весь текст в html файлах заключается в эти теги. Первый тег, открывающий а второй, со знаком /, закрывающий.

<head> и </head> это тоже специальные теги, между которыми пишутся другие теги, в которых тоже могут быть теги :). Не обращай внимания на смайлик, я серьезно. А какие теги пишутся между этими тегами, ты узнаешь в процессе обучения, т.к. все я описать сейчас не смогу.

<title>моя пробная страница</title> А вот и первые теги, которые пишутся между <head></head>. Эти теги предназначены для надписи заголовка на окне браузера.

<body>и</body> Между этими тегами ты будешь писать события для запуска функций JavaScript. И еще многое другое.

Ну а теперь хватит рассматривать html теги, ведь не за этим ты сюда пришел. Сейчас мы начинаем учить JavaScript. Сейчас добавь в написаное то, что написано у меня, а я потом расскожу.


<html>
<head>
<title>моя пробная страница</title>
<script language="JavaScript"> //Начало оно и в африке начало :)
<!--Прячемся от чужих глаз

//Хватит прятаться-->
</script>
</head>
<body>
</body>
</html>

Как ты уже заметил, мы добавили несколько строк в прошлый текст. Сейчас я расскажу что они значат.

<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()">.

Далее надо написать такой текст:


<div id="ani1" style="position:absolute; left: 500; top: 10">
Текст, ну-ка побежал!
</div>

Потом это закрываеться тегом </body>.

Теперь надо обьяснить то, что здесь происходит. Строка 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 миллисекунд, пока значение не станет ложным. Ну и закрывающиеся фигурные скобки значат, что действие закрываеться

Категория: Java Script | Добавил: my-wapAdmin (22.09.2008)
Просмотров: 1303 | Комментарии: 2 | Рейтинг: 5.0/1 |
Всего комментариев: 0
Имя *:
Email *:
Код *:
 
 
Категории каталога
Java Script [2]
Java Script.
PHP [1]
PHP

Форма входа

Мини-чат

Наш опрос
Оцените мой сайт
Всего ответов: 13

Поиск

Друзья сайта

Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
 

Copyright MyCorp © 2018