» Главная
eXcode.ru » Статьи » JAVA / JavaScript
» Новости
» Опросы
» Файлы
» Журнал



Пользователей: 0
Гостей: 12



Автономная газификация под ключ цена

Прокуратура Ямало-Ненецкого Автономного округа

fas-him.ru




Бегущий текст




Источник: VR-online

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

Вот и все! Так же можешь задавать свои вопросы на linux7.2@mail.ru .
К началу статьи





Добавил: LedWormДата публикации: 2005-08-22 20:39:29
Рейтинг статьи:3.00 [Голосов 5]Кол-во просмотров: 14981

Комментарии читателей

Всего комментариев: 1

2009-09-04 00:10:39
Bourbesee
Соберем для Вас по сети интернет базуданных потенциальных клиентов для Вашего Бизнеса!
Только свежие данные, только по Вашим описаниям и пожеланиям.
Предназначено для Ваших активных прямых продаж Ваших товаров и услуг!
Для получения более подробной информации свяжитесь с нами по
Телефону +79133913837
ICQ: 6288862
Email: prodawez@mixmail.com
Skype: prodawez
Ваше имя: *
Текст записи: *
Имя:

Пароль:



Регистрация

Какую музыку вы предпочитаете?
Techno
11% (29)
Rap
10% (26)
Rock
48% (126)
Trance
10% (27)
Pop
7% (17)
house
5% (13)
Классическую
7% (19)
Я не слушаю музыку
2% (4)

Проголосовало: 261
Если вы решили удалить Windows, сделайте это медленно с удовольствием, побайтно...
Рейтинг: 8.8/10 (17)
Посмотреть все анекдоты