logo

Бегущая строка на страницах сайта

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

Теги бегущей строки это <marquee> </marquee>, всё что будет заключено меду этими тегами, будет двигаться по строке. Движения можно сделать разными: слева на прав, справа на лева, сверху вниз, снизу вверх, возвратно-поступательные движения и т.д. Рассмотрим самую простую бегущую строку. Для этого заключим какой-то текст межу выше написанными тегами:

Пример простой бегущей строки

Как видим, строка движется по всей ширине страницы. Иногда возникает необходимость, чтобы строка двигалась в ограниченном пространстве. Для этого нужно создать блок, внеся в теги некоторые атрибуты. Для начала давайте рассмотрим все атрибуты, которые могут пригодиться при создании бегущей строки.

Атрибуты тега MARQUEE.

 

direction=" " - атрибут устанавливающий направление скроллинга:
     Значения:
left - движение справа налево (по умолчанию)
right - движение слева направо
up - движение снизу верх
down - движение сверху вниз
behavior=" " - атрибут устанавливающий тип скроллинга:
     Значения:
scroll - скроллинг в одном из заданных направлений (по умолчанию)
slide - одноразовый скроллинг с остановом контента
alternate - возвратно-поступательный скроллинг

width=" " - устанавливает ширину блока для строки
height=" " - устанавливает высоту блока
hspace=" " - отступа в пикселях от вертикальных границ блока
vspace=" " - отступ в пикселях от горизонтальных границ блока


bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга
style=" " - атрибут указывает стиль форматирования блока и контента
class=" " - атрибут внедрение стиля форматирования блока и контента


loop=" " - определяет количество циклов перемещения
"-1" или "infinite" - безконечное перемещение наполнения в блоке
"N" - целое число, задающее количество показов в блоке


bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга

 

Атрибут     scrollAmount    - устанавливает скорость движения строки.

(использован материал сайта http://kapon.com.ua)

Теперь сделаем бегущую строку в небольшом окошке, а для наглядности я окрашу это окошко в какой-нибудь цвет. Для создания бегущей строки в окошке нужно к тегам приставить атрибуты Widht и Height.

<marquee width="300" height="50" bgcolor=#87CEFA> Строка в окошке </marquee>

Строка в окошке

Для того чтобы строка двигалась с лева на право, необходимо добавить атрибут right

<marquee direction="right">движение слева направо</marquee>

движение слева направо
При добавлении атрибута alternate, движение строки будет от края до края

<marquee behavior="alternate"  width="300px" height="50px"bgcolor="#87CEFA" >постоянное движение</marquee>
постоянное движение
Теперь с помощью атрибута scrollamount изменим скорость движения строки. Принцип такой - чем меньше цифра, тем медленнее движется строка

<marquee scrollamount="1"  width="300px" height="50px"bgcolor="#87CEFA" >Замедляем движение</marquee>
Замедляем движение<marquee width="150" height="200" scrollamount="2" direction="up" bgcolor="#87CEFA"> Движется снизу вверх <br> вверх со скоростью 2 </marquee>
Движется снизу вверх
вверх со скоростью 2

Заменив direction="up" на direction="down" движение строки будет сверху вниз.

Для удобства пользователей можно сделать чтобы бегущая строка останавливалась при наведении курсора. Для этого к тегу необходимо добавить следующую конструкцию
onmouseover="this.stop()" onmouseout="this.start()"  
<marquee onmouseover="this.stop()" onmouseout="this.start()" width="150" height="200" scrollamount="2" direction="down" Bgcolor="#87CEFA"> останавливается при наведении курсора </marquee>
останавливается при наведении курсора

Рассмотрим еще движение картинки. Можно таким способом сделать прокрутку рекламных баннеров,  кнопок и т.д. В общую конструкцию необходимо вставить адрес картинки, баннера, кнопки...

<marquee direction="right" scrollamount="4"  width="500px" height="100px">
<img src="http://mehelps.ru/wp-content/uploads/2016/09/koleso.giff" alt="бегущая строка с изображением"></marquee>


бегущая строка с изображением

Всё основное я Вам рассказал, но это не предел. Можете сами пофантазировать и сделать что-то необычное. Удачи!!!

Бегущая строка на страницах сайта обновлено: Август 5, 2017 автором: admin

Обсуждение закрыто.

▲Вверх