Бегущая строка формируется с помощью открывающего тега (закрывающий тег обязателен).
width=″…″ - ширина бегущей строки в пикселях или процентах от ширины экрана.
Height=″…″ - высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
bgcolor=″…″ - определяет цвет фона бегущей строки.
behavior=″…″ задает тип движения (поведение) бегущей строки и имеет следующие значения
scroll - циклическая прокрутка текста из одного конца в другой
slide - текст появляется с одного края и останавливается у другого.
alternate - текст перемещается от одного края к другому и обратно.
direction=″…″ - определяет направление движения бегущей строки. Имеет следующие значения:
left - текст движется влево по строке
right - текст движется вправо по строке
up - вся строка перемещается снизу вверх
down - строка движется сверху вниз
scrollamount=″…″ - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например
scrollamount= ″1″
scrollamount= ″2″
scrollamount= ″3″
scrolldelay=″…″ - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например
scrolldelay=″100″
scrolldelay=″200″
scrolldelay=″300″
loop=″…″ - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
hspace=″…″ - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.
hspace=″10″
hspace=″0″
vspace=″…″ - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.
hspace=″0″
hspace=″10″
HTML - коды бегущей строки
ВАШ ТЕКСТ коментарии статьи
16.09.2015
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать в HTML документе бегущую строку
. Это, своего рода, примитивная анимация на веб сайте без использования графических редакторов.
Бегущую строку можно использовать для вывода новостей, акций, рекламного сообщения и даже для красивых дизайнерских моментов (например: облако в небе передвигается в шапке сайта). Я думаю, вы сами найдете применение бегучей строке на своем сайте, а моя задача сейчас рассказать, как это делается и как это выглядит на практике.
Для создания бегущей строки используют тег:
Результат:
Бегущая строка
* атрибуты для бегущей строки
○ цвет фона бегущей строки
Чтобы закрасить фон бегущей строки, добавьте к тегу «marquee»
атрибут «bgcolor»
:
Результат:
Бегущая строка
○ высота и ширина бегущей строки
Чтобы установит высоту и ширину бегущей строки, добавьте к тегу «marquee»
атрибут «width»
и «height»
:
Результат:
Бегущая строка
○ поведение бегущей строки
Добавьте к тегу «marquee»
атрибут «behavior»
с такими значениями:
scroll - ;
slide – строка начинает свой путь из одного края и останавливается у другого;
alternate –
Результат:
обычная прокрутка (по умолчанию)
Бегущая строка перейдет из одного края и остановится у другого
строка будет двигаться от края до края
○ направление бегущей строки
Добавьте к тегу «marquee»
атрибут «direction»
с такими значениями:
left – ;
right – движение текста вправо;
up – движение текста снизу вверх;
down - движение текста сверху вниз
Результат:
движение текста влево (по умолчанию)
движение текста вправо
движение текста снизу вверх
движение текста сверху вниз
○ скорость бегущей строки
Чтобы регулировать скорость перемещения бегущей строки, добавьте к тегу «marquee»
атрибут «scrollamount»
:
Чем больше значение, тем больше скорость.
Результат:
Бегущая строка
○ задержка интервала передвижения бегущей строки
Еще один атрибут, с помощью которого можно регулировать скорость. Чем больше значение, тем меньше скорость. Добавьте к тегу «marquee»
атрибут «scrolldelay»
:
Результат:
Бегущая строка
○ количество проходов бегущей строки
Если вам нужно указать определенное количество проходов бегущей строки, добавьте к тегу «marquee»
атрибут «loop»
:
В примере стоит значение «2» , это значит, что проходов будет только два.
○ отступы бегущей строки
Если вам нужно указать отступ с левой и правой стороны, добавьте к тегу «marquee»
атрибут «hspace»
:
Результат:
Бегущая строка
Чтобы вставить бегущую строку в картинку, вставьте между тегами
уже известный вами
:
Результат:
Все атрибуты для тега
На сегодня это все! Жду вас на следующем уроке. Удачи!
Предыдущая запись
Следующая запись
Создать бегущую строку
на сайте – проще простого.
Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений и т.д.
Для создания бегущей строки используют тег:
width
="..." - ширина бегущей строки (в пикселях или процентах).
Пример:
height
="..." - высота бегущей строки (в пикселях или процентах).
Пример:
bgcolor
="..." - цвет фона бегущей строки (цвет задается кодом или словом).
Пример:
behavior ="..." поведение бегущей строки. Имеет такие значения:
scroll - обычная прокрутка (по умолчанию);
slide – строка начинает свой путь из одного края и останавливается у другого;
alternate
– строка будет двигаться от края до края
Пример:
direction ="..." - направление бегущей строки. Имеет такие значения:
left – движение текста влево (по умолчанию);
right – движение текста вправо;
up – движение текста снизу вверх;
down
- движение текста сверху вниз
Пример:
scrollamount
="..." - скорость движения строки (в пикселях).
Пример:
scrolldelay
="..." - временной интервал между шагами (в миллисекундах).
Пример:
loop
="..." – сколько раз пробежит бегущая строка. Если в значение поставить «0»(По умолчанию), бегущая срока будет прокручивать текст бесконечное количество раз, если в значение поставить «2», тогда текст прокрутится 2 раза.
Пример:
hspace
="..." – отступ от левого и правого края бегущей строки (в пикселях).
Пример:
Если все собрать вместе, код бегущей строки в HTML будет выглядеть вот так:
Так как перемещали текст в бегущей строке, так можно переместить и изображение.
Достаточно между тегами вставить картинку:
В бегущую строку можно установить текст со ссылкой. Для этого нужно прописать следующий код в HTML:
Ну думаю, сами разберётесь, что к чему. Попробуйте использовать различные сочетания атрибутов для достижения нужного Вам эффекта. Добавлю лишь то, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой.. прописывая нужные теги внутри тега
