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



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





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




Источник: 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]Кол-во просмотров: 16374

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

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

2018-03-12 15:24:06
Hxeacxi
Интересная работа с обучением, высокая зарплата!

Вы работаете дома! Полностью честно и прозрачно;
Доступно для всех - неважно кто вы и какой у вас опыт работы в интернете!
Вы будете зарабатывать: свыше четырёх тысяч рублей в день!
Сложность: Несложно!
Оплата: - уже на следующий деньги у вас на счету!

Ознакомтесь с условиями у нас на сайте. > www.pisma.exrabota.ru < Скопируйте и вставьте в адресную строку Вашего браузера.

2018-03-12 05:50:39
Nsbzokl
Предлагаем Вам работу без вложений, на системе автоматического приёма и обработки заказов.

Мы предоставляем:

- Наш лицезионный софт.
- документы со всей необходимой доп. информацией.
- постоянная техническая поддержка.

Оплата от 5500 в день. Выплаты ежедневно.

Более подробная информация на нашем сайте >> http://zakaz.exrabota.ru/ <<

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

Пароль:



Регистрация

Какой поисковик лучше?
Yandex
41% (63)
Rambler
10% (15)
Google
42% (65)
Yahoo!
1% (1)
MSN
0% (0)
Mail.ru
2% (3)
Aport
1% (1)
AltaVista
1% (2)
Другой
2% (3)

Проголосовало: 153
Видак короче смотрю, кассета пиратская естественно, такая где на экране крутится счетчик чего-то, то ли кадров, то ли времени.. Сроду внимания не обращал, а тут ближе к концу фильма, меня вдруг осенило: "Вот это посещаемость на чьем-то сайте, вот счетчик крутится".....
Рейтинг: 3.3/10 (7)
Посмотреть все анекдоты