Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2011-04-14

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

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

Вы наверное уже заметили, что такой бегущий блок я использую на этом сайте, здесь я вывожу наиболее значимые события и новости. Этот блок у меня так и называется Новости сайта. Пример работы скрипта Вы видите ниже и немного выше и правее:

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

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

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

Реализуется такой блок очень легко. В нужное место своей 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 обложку. Практическое руководство.

Сайт своими руками от А до Я. Пошаговый Обучающий Видео Курс.

 

Просмотров: 14560


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Vlad
Дата: 2011-04-15

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

Комментарии добавил(а): Прохожий
Дата: 2011-04-15

Наконец-то дождался! Спасибо Андрей! Как-то писал Вам на почту как раз по этому новостному блоку:) Здорово, что не забыли рассказать об этом посетителям сайта. Давно хотел сделать такую же штуковину у себя на сайте.

Комментарии добавил(а): Начинающий сайтостроитель Оксана
Дата: 2011-04-15

Спасибо за скрипт, так приятно узнавать что то новенькое.

Комментарии добавил(а): Елена
Дата: 2011-04-15

Ой,как здорово! Обязательно попробую сделать подобное у себя. Спасибо, Андрей!

Комментарии добавил(а): alex
Дата: 2011-04-15

а это только для html5 ??? а если у меня xhtml

Комментарии добавил(а): АндрейК
Дата: 2011-04-15

Alex , вся прелесть этого скрипта в том, что он работает практически везде (в отличии от многих других) и в html4 и в html5. Вы наверное заметили, что у меня на сайте помесь: PHP, CSS и HTML.... и скрипт работает!

Комментарии добавил(а): Ольга
Дата: 2011-04-15

Супер

Комментарии добавил(а): Сергей (ессентуки)
Дата: 2011-04-15

Спасибо за урок....а вообще можно подключить на сайт ....RSS Новости сайта

Комментарии добавил(а): Олег Гузь
Дата: 2011-04-15

Спасибо, Андрей, за скрипт и за очень доходчивый комментарий! Обязательно испытаю!

Комментарии добавил(а): Ирина
Дата: 2011-04-15

Замечательный скрипт. Обязательно использую в своем блоге - http://misuperdomen.ru/. Спасибо.

Комментарии добавил(а): Ирина
Дата: 2011-04-16

Спасибо, Андрей! Как всегда нужная информация и скрипт. Обязательно установлю на своем блоге: http://startvzlet.ru

Комментарии добавил(а): Ирина
Дата: 2011-04-16

Ура!!! Я сделала это! И всего за 5 минут! Огромное спасибо, Андрей! Посмотрите: http://startvzlet.ru

Комментарии добавил(а): Наталия
Дата: 2011-04-16

Мне очень нравится! Большое спасибо за скрипт и за Ваш труд! Будем ждать от Вас новых полезностей.

Комментарии добавил(а): jenia
Дата: 2011-04-17

Спасибо за скрипт, нету слов ))

Комментарии добавил(а): Константин
Дата: 2011-04-18

Отличная штука!!! Спасибо, Андрей!

Комментарии добавил(а): Константин
Дата: 2011-04-16

Класс! Обязательно использую. Спасибо за то, что делитесь с нами своими работами. Успехов и удачи.

Комментарии добавил(а): Olga
Дата: 2011-04-17

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

Комментарии добавил(а): Константин
Дата: 2011-04-18

Отличная штука!!! Спасибо, Андрей!

Комментарии добавил(а): Владимир
Дата: 2011-04-20

Спасибо автору! Это один из лучших ресурсов данной тематике и по содержанию, и по желанию поделиться своими знаниями. Так держать!

Комментарии добавил(а): Александр
Дата: 2011-05-01

Отлично

Комментарии добавил(а): Татьяна
Дата: 2011-07-03

Спасибо, Андрей! Здорово!

Комментарии добавил(а): Лариса
Дата: 2011-12-10

Спасибо. У меня всё опять получилось. А можно сделать так, чтобы двигалось не по вертикали, а по горизонтали? Еще раз, спасибо.

Комментарии добавил(а): Ольга
Дата: 2012-01-23

Спасибо огромное!Я Ваша подписалась давно на Ваши новости!Подскажите,как в коде сделать тоже строку с красным цветом,очень надо!

Комментарии добавил(а): Ольга
Дата: 2012-01-23

Спасибо огромное!Я Ваша подписалась давно на Ваши новости!Подскажите,как в коде сделать тоже строку с красным цветом,очень надо!

Комментарии добавил(а): АндрейК
Дата: 2012-01-23

Ольга, пропишите в таблице CSS отдельный стиль и придайте любой цвет

Комментарии добавил(а): Алексей.
Дата: 2012-02-02

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

Комментарии добавил(а): Николай
Дата: 2012-04-13

Благодарю Вас и искренне признателен за Вашу работу!!!

Комментарии добавил(а): Дмитрий
Дата: 2012-05-26

В этом скрипте можно использовать картинки? И как сделать, чтобы они перемещались по горизонтали? Спасибо!

Комментарии добавил(а): Ирина
Дата: 2012-09-01

Как раз то, что искала. Нужна новостная лента, не знала, как сделать ее движущейся. Теперь знаю :-) БлагоДарю за помощь! Буду реализовывать. http://animangalife.ru/

Комментарии добавил(а): irina
Дата: 2012-09-07

Спасибо, это может пригодится, сайт заполняется и посетителю, конечно будет легче с таким информером, спасибо! http://dobroan.jim.com я только учусь!

Комментарии добавил(а): Алекс
Дата: 2012-11-14

Подскажите, как можно замедлить скорость (выставить менее 1)

Комментарии добавил(а): дмитрий
Дата: 2013-01-20

А у меня чего то не получилось, блок вставил и новости есть, только не бежит ничего, пришлось удалить

Комментарии добавил(а): Сергей
Дата: 2013-01-17

Это хорошо! А как сделать так, чтобы элементы шли сразу один за одним, без пустого пространства?

Комментарии добавил(а): Андрей
Дата: 2013-03-21

Я даже не представлял, что все так просто. Уже поставил сайт в закладки. Буду заходить и изучать.

Комментарии добавил(а): Анна Любимова
Дата: 2013-04-09

Огромное спасибо автору сайта! Вы не представляете, как долго и трудно я искала способ сделать вот такой новостной блок! ну просто кучу ерунды перелопатила. И убила пару недель. Огромное, еще раз, спасибо!

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработай в Интернете
и осуществи свою МЕЧТУ
"Как?"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT