Блог свободен от NOFOLLOW!
1

Как сделать бегущую строку

Делаем бегущую строку на странице блога или сайта.

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

Это получится не большой урок по HTML: «Бегущая строка — элемент дизайна страниц сайта или блога».

Итак, за вывод бегущей строки в HTML отвечает закрывающийся тег ... . В качестве примера, я буду делать бегущую строку: «Бегущая строка на сайте или блоге».

Какие для этого нужны  теги и атрибуты.

Ширина строки — width="..."

Высота строки — height="..."

[codesyntax lang="html4strict"]

 <marquee  width="400" height="40">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

Поменяем цвет фона - bgcolor="..."

[codesyntax lang="html4strict"]

<marquee  width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

За движение строки отвечает тег — behavior.

Он имеет значения:

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

slide — с помощью этого атрибута строка доезжает до края и останавливается. Если обновить страницу, строка начнёт двигаться снова.

[codesyntax lang="html4strict"]

<marquee  behavior=slide width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

alternate — движение строки от края к краю.

[codesyntax lang="html4strict"]

<marquee  behavior=alternate width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

За направление движения отвечает тег direction с атрибутами:

left — влевo (направление по умолчанию)
right — впрaво
up — снизу ввeрх
down — сверхy вниз

[codesyntax lang="html4strict"]

<marquee  direction="up" width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

За скорость движения строки отвечает атрибут — scrollamount="...", которому задаются значения скорости от 1 до 10.

[codesyntax lang="html4strict"]

<marquee  direction="up" scrollamount="1" width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

Атрибут scrolldelay="..." отвечает за время прохождения строки. Значения в миллисeкундах от 100 до 300.

[codesyntax lang="html4strict"]

<marquee  direction="up"  scrollamount="1" scrolldelay="200" width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

Можно с помощью атрибута onMouseOver="this.stop ()" onMouseOut="this.start ()" останавливать бегущую строку, наведя курсором на неё.

[codesyntax lang="html4strict"]

<marquee onMouseOver="this.stop ()" onMouseOut="this.start ()"  scrollamount="1"  scrolldelay="100" width="400" height="40" bgcolor="8C54A7">Бегущая строка на сайте или блоге.</marquee>

[/codesyntax]

Бегущая строка на сайте или блоге.

Вот так получается бегущая строка. Думал, что заметка будет не большая, а получилось...

На самом деле на так уж всё сложно.

P.S. Устанавливать HTML-код бегущей строки надо в HTML-редакторе! После установки не надо переходить в визуальный. Если нужно посмотреть как строка работает, зайдите в «Посмотреть изменения».

 

Что ещё почитать
Социальные сети — источник трафика
Прокрутка отдельной страницы блога или сайта
Инструмент для блоггера Windows Live Writer

Популярность: 51%

Рекомендую следующие статьи:

  1. Социальные сети — источник трафика
  2. Прокрутка отдельной страницы блога или сайта
  3. Инструмент для блоггера Windows Live Writer

Буду благодарен, если поделитесь этой статьей:

Твитнуть


5 комментариев на “Как сделать бегущую строку”

  • Людмила:

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

    • irkinfo irkinfo:

      Это же HTML, значит HTML-редактор! Я же писал про бегущую строку на странице блога или сайта, а если устанавливать в конкретное место шаболна — это уже другая тема.

  • Ns11:

    Все просто как в велосипеде!!! :)

  • arkadjar:

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

    • irkinfo irkinfo:

      Да не грузит, если не перенагружать.))) Рекламу от Nolix используют и ни кого не грузит)))

Добавить комментарий для arkadjar


Подписка на RSS

Подпишись на RSS

Подписка на обновления Blog in Blog по Email

Лучшее видео
Информация
У Вас может быть такая же.
У Вас может быть такая же.
У Вас может быть такая же.
У Вас может быть такая же.
Бизнес портал B2B-Broker - российский деловой портал, информационный портал, каталог предприятий, справочник предприятий
Подписка на RSS
  Подписаться на RSS

Введите адрес электронной почты:

Go To Top