Главная » Статьи » Веб-дизайн

Скрипт для сайта: Бегущая строка.

Как сделать на сайте Бегущую Строку.

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

Дата: 2011-04-29

Скрипт для сайта: Бегущая строка.

Сегодня мы рассмотрим новый скрипт для сайта: Бегущая строка. При наведении мыши на бегущий текст, строка останавливается. Ниже приведен пример работы скрипта:

Открыт новый раздел нашего сайта: Почтовая Рассылка. В разделе Вы узнаете о всех тонкостях Почтовых рассылок, а также какую огромную пользу приносит Почтовая Рассылка владельцам сайтов!!!

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

Теперь смотрим код скрипта, приведен в Листинге 1:

Листинг 1.

<marquee behavior="scroll" scrollAmount="3" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">
Здесь вставляем текст, который будет отображаться в бегущей строке.
</marquee>

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

Параметры scrollAmount="3"иonMouseOut="this.scrollAmount=3"влияют на скорость движения текста. Чем больше цифра, тем быстрее бежит текст. В данном случае установлена цифра 3, но мой оптимальный вариант.

Параметры width="400"и height="20" как Вы понимаете это ширина и высота, поля где бежит текст, т.е. Вы можете изменить эти цифры и соотвественно изменятся ширина и высота этого поля.

В коде вместо словЗдесь вставляем текст, который будет отображаться в бегущей строкепрописываете текст, который нужен Вам и форматирует его нужным образом.

Как Вы заметили, текст бежит справа налево. А если нужно наоборот, слева направо? Тогда используйте код Листинга 2.

Листинг 2.

<marquee behavior="scroll" scrollAmount="3" direction="right" width="400" height="20" onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=3">
Здесь вставляете текст, который будет отображаться в бегущей строке.
</marquee>

Ниже Вы видите пример работы скрипта, здесь текст бежит слева направо:

Открыт новый раздел: Почтовая Рассылка. Здесь Вы узнаете какую огромную пользу приносит Почтовая Рассылка владельцам сайтов!

В коде Листинга 2, все значения такие же как и в коде Листинга 1, поэтому повторяться не буду.

Как вставить скрипт на сайт? Очень просто, копируете код нужного Вам Листинга, прописываете нужный текст, при необходимости изменяете цифровые значения скорости, ширины и высоты и просто вставляете в то место кода своей web-страницы, где хотите видеть бегущую строку.

Вот и всё. Как видите все очень просто.

 

Всего Вам доброго.



Источник: http://www.luksweb.ru/view_post.php?id=249
Категория: Веб-дизайн | Добавил: fotocom (30.04.2015)
Просмотров: 197 | Теги: бегущая строка, веб-дизайн, скрипты | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *:

сайты фотоком
Посетите сайты студии ФОТОКОМ
Нижегородский фотобанк Панорама Нижнего Новгорода Фотоком-Арт Фотоком-Веб Свадебный альбом Фотоком-дети