Как сделать бегущий текстовый блок?
Автор: Андрей Краснокутский
Дата: 2011-04-14 Бегущий текстовый новостной блок.
В этом уроке мы научимся делать бегущий блок текста. Текст движется снизу вверх. При наведении мышки текст останавливается. Такой блок удобен тем, что он легко масштабируется. Здесь можно использовать все html-теги в том числе и ссылки.
Вы наверное уже заметили, что такой бегущий блок я использую на этом сайте, здесь я вывожу наиболее значимые события и новости. Этот блок у меня так и называется Новости сайта. Пример работы скрипта Вы видите ниже и немного выше и правее:
Реализуется такой блок очень легко. В нужное место своей web-страницы вставляете код Листинга 1. Давайте сначала посмотрим код, а затем разберемся:
Листинг 1.
<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>- это просто закрывающий тег, его трогать не надо!
Вот и всё. Копируйте, редактируйте свой текст и оформление, и бегущий текстовый новостной блок готов.
Всего Вам доброго.
Читайте так же:
Скрипт: Фоновая музыка на сайте с панелью управления.
Создание электронных книг по Вашим заказам.
Что полезного нам может дать биржа покупки и продажи ссылок Sape?
Как создать RSS-канал новостей на сайте?
Как сделать красивую 3D обложку. Практическое руководство.
Сайт своими руками от А до Я. Пошаговый Обучающий Видео Курс.
Просмотров: 19953
Спасибо Андрей. Не только напомнили о такой возможности для сайта, но и расширили мои знания.
Наконец-то дождался! Спасибо Андрей! Как-то писал Вам на почту как раз по этому новостному блоку:) Здорово, что не забыли рассказать об этом посетителям сайта.
Давно хотел сделать такую же штуковину у себя на сайте.
Спасибо за скрипт, так приятно узнавать что то новенькое.
Ой,как здорово! Обязательно попробую сделать подобное у себя. Спасибо, Андрей!
а это только для html5 ???
а если у меня xhtml
Alex , вся прелесть этого скрипта в том, что он работает практически везде (в отличии от многих других) и в html4 и в html5. Вы наверное заметили, что у меня на сайте помесь: PHP, CSS и HTML.... и скрипт работает!
Спасибо за урок....а вообще можно подключить на сайт ....RSS Новости сайта
Спасибо, Андрей, за скрипт и за очень доходчивый комментарий!
Обязательно испытаю!
Замечательный скрипт. Обязательно использую в своем блоге - http://misuperdomen.ru/. Спасибо.
Спасибо, Андрей! Как всегда нужная информация и скрипт. Обязательно установлю на своем блоге: http://startvzlet.ru
Ура!!! Я сделала это! И всего за 5 минут! Огромное спасибо, Андрей! Посмотрите: http://startvzlet.ru
Мне очень нравится!
Большое спасибо за скрипт и за Ваш труд!
Будем ждать от Вас новых полезностей.
Спасибо за скрипт, нету слов ))
Отличная штука!!!
Спасибо, Андрей!
Класс! Обязательно использую.
Спасибо за то, что делитесь с нами своими работами. Успехов и удачи.
Спасибо за скрипт, он мне очень был нужен. Обязательно установлю его на своем свайте.
Отличная штука!!!
Спасибо, Андрей!
Спасибо автору!
Это один из лучших ресурсов данной тематике
и по содержанию, и по желанию поделиться своими знаниями.
Так держать!
Спасибо, Андрей! Здорово!
Спасибо. У меня всё опять получилось. А можно сделать так, чтобы двигалось не по вертикали, а по горизонтали? Еще раз, спасибо.
Спасибо огромное!Я Ваша подписалась давно на Ваши новости!Подскажите,как в коде сделать тоже строку с красным цветом,очень надо!
Спасибо огромное!Я Ваша подписалась давно на Ваши новости!Подскажите,как в коде сделать тоже строку с красным цветом,очень надо!
Ольга, пропишите в таблице CSS отдельный стиль и придайте любой цвет
Спасибо, у себя поставил, всё нормально работает и понятно разжевывали для чайника
Благодарю Вас и искренне признателен за Вашу работу!!!
В этом скрипте можно использовать картинки?
И как сделать, чтобы они перемещались по горизонтали?
Спасибо!
Как раз то, что искала. Нужна новостная лента, не знала, как сделать ее движущейся. Теперь знаю :-) БлагоДарю за помощь! Буду реализовывать. http://animangalife.ru/
Спасибо, это может пригодится, сайт заполняется и посетителю, конечно будет легче с таким информером, спасибо! http://dobroan.jim.com я только учусь!
Подскажите, как можно замедлить скорость (выставить менее 1)
А у меня чего то не получилось, блок вставил и новости есть, только не бежит ничего, пришлось удалить
Это хорошо! А как сделать так, чтобы элементы шли сразу один за одним, без пустого пространства?
Я даже не представлял, что все так просто. Уже поставил сайт в закладки. Буду заходить и изучать.
Огромное спасибо автору сайта! Вы не представляете, как долго и трудно я искала способ сделать вот такой новостной блок! ну просто кучу ерунды перелопатила. И убила пару недель. Огромное, еще раз, спасибо!
|