bonuswm.org - сервис раздачи бонусов webmoney

Как сделать бегущий текстовый блок

Бегущий текстовый новостной блок

Текст движется снизу вверх. При наведении мышки текст останавливается. Такой блок удобен тем, что он легко масштабируется. Здесь можно использовать все html-теги в том числе и ссылки.

В этом блоке вы сможете выводить новости сайта и многое другое!

Пример работы скрипта Вы видите ниже

19.02.2011
На нашем сайте открыт новый раздел: Скрипты

01.12.2010
Новая Услуга посетителям сайта Изготовление электронных книг по Вашим заказам

25.10.2010
Зарабатывайте вместе с нами 2-х Уровневая Партнёрская Программа

Реализуется такой блок очень легко. В нужное место своей web-страницы вставляете html код Давайте сначала посмотрим код, а затем разберемся:

<marquee behavior=”scroll” scrollAmount=”5″ direction=”up” width=”350″ height=”150″ onMouseOver=”this.scrollAmount=0″ onMouseOut=”this.scrollAmount=3″>

<div class=’beg_stroka’> <strong>19.02.2011</strong><br>
На нашем сайте открыт новый раздел: <a href=”http://www.luksweb.ru/view_cat.php?cat=14″ target=”_blank”><strong>Скрипты</strong></a> </div><br>

<div class=’beg_stroka’> <strong>01.12.2010</strong><br> Новая Услуга посетителям сайта <a href=”http://www.luksweb.ru/view_post.php?id=216″ target=”_blank”><strong>Изготовление электронных книг по Вашим заказам</strong></a> </div><br>

<div class=’beg_stroka’> <strong>25.10.2010</strong><br> Зарабатывайте вместе с нами <a href=”http://sait.luksweb.ru/partners.php” target=”_blank”><strong>2-х Уровневая Партнёрская Программа</strong></a> </div>

</marquee>

Итак, теперь давайте разбираться. Что здесь Вам можно изменять и что на что влияет?

Визуально весь код Листинга 1 разбит на 5 абзацев, сделано это для удобства зрительного восприятия.

Смотрим 1-й абзац кода. Значение scrollAmount=”5″цифра в кавычках, указывает на скорость перемещения текста. Как видите в примере указана цифра 5, чем она больше, тем быстрее движется текст. Например в блоке Новости сайта (смотрите выше и правее) стоит значение 2. Значение width=”350″определяет ширину блока, в данном случае указано 350 пикселей. Значение height=”150″определяет высоту блока, в данном случае 150 пикселей. Все эти числовые значения Вы можете смело изменять на своё усмотрение. Больше ничего трогать не нужно!

Абзацы 2, 3 и 4. Это собственно говоря и есть бегущие новости, каждый абзац – отдельная новость или текстовый блок. Добавлять таких абзацев можете сколько угодно, в данном случае у меня их три. Разберем один из абзацев, например 2-й:

<div class=’beg_stroka’> <strong>19.02.2011</strong><br>
На нашем сайте открыт новый раздел: <a href=”http://www.luksweb.ru/view_cat.php?cat=14″ target=”_blank”><strong>Скрипты</strong></a> </div><br>

Весь абзац заключен в теги <div> </div>, но это не принципиально, просто для удобства, можно использовать например теги <p> </p> – это на Ваше усмотрение. Внутри открывающего тега <div> прописан класс CSS. А дальше идет обычный текст. И еще прописана ссылка тегом a href . Как видите всё очень просто, обычный html-код.

Добавляете таких абзацев сколько нужно (простым копированием – вставкой) и делаете нужное количество новостей.

Последний (5-й) абзац в Листинге 1</marquee>– это просто закрывающий тег, его трогать не надо!

Вот и всё. Копируйте, редактируйте свой текст и оформление, и бегущий текстовый новостной блок готов.

Автор

admin

Комментарии:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.