marquee в HTML


HTML тег

Элемент (от англ. «marquee» ‒ «бегущая строка») cоздаёт горизонтальную и вертикальную анимацию текста на странице в виде бегущей строки.

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

Синтаксис

Закрывающий тег

Атрибуты

Элемент поддерживает глобальные атрибуты и события.

Стилизация по умолчанию

В качестве альтернативы применяется стилевое свойство animation .

в HTML

Тег — элемент языка html, применяемый для создания на web-странице бегущей строки. Но этим тег не ограничивается. Используя этот элемент, можно на web-странице перемещать и другие элементы — тексты, таблицы, изображения и др. и не только по горизонтали, но и по вертикали. Наибольшего эффекта от применения тега можно добиться, если удачно подобрать атрибуты.

behavior . Задает тип движения содержимого контейнера .

bgcolor . Цвет фона.

direction . . Указывает направление движения содержимого контейнера .

height . Высота области прокрутки.

hspace . Горизонтальные поля вокруг контента.

loop . Задает, сколько раз будет прокручиваться содержимое.

scrollamount . Скорость движения контента.

scrolldelay . . Величина задержки в миллисекундах между движениями.

truespeed . . Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.

vspace . Вертикальные поля вокруг содержимого.

Тег marquee

Описание тега MARQUEE


Тег предназначен для создания бегущей строки.

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

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

Behavior – задает характер перемещения содержимого бегущей строки.

— alternate — содержимое перемещается между левым и правым краями строки.
— scroll – содержимое перемещается в направлении, заданном атрибутом Direction . Достигнув конца строки — исчезает, и начинает движение сначала.
— slide — содержимое перемещается в направлении, заданном атрибутом Direction . Достигнув конца строки – останавливается.

Значение по умолчанию

Direction – задает направление движения содержимого бегущей строки.

— left — движение справа налево
— right – движение слева направо
— up — движение снизу вверх
— down — движение сверху вниз

Значение по умолчанию

Bgcolor – задает фоновый цвет строки.

Цвет можно задать двумя способами (подробнее здесь. )

Значение по умолчанию

— Цвет фона, заданный в браузере по умолчанию (обычно белый)

Height и Width – высота и ширина строки в пикселях, либо в процентах относительно ширины родительского элемента.

— целое положительное число. В этом случае ширина будет задана в пикселях.

— целое положительное число с символом %.

Значение по умолчанию

— высота 12 пикселей
— ширина 100%

Loop – задает количество прокруток содержимого бегущей строки. Когда указанное число прокруток пройдено — содержимое бегущей строки остается в конечной точке.

Любое целое положительное число или -1 (минус единица) для непрерывного движения.

Значение по умолчанию

Scrollamount – задает скорость перемещения содержимого бегущей строки.


Любое целое положительное число от 1 (минимальная скорость) до 10 (максимальная скорость).

Значение по умолчанию

Scrolldelay – задает время задержки между движениями содержимого бегущей строки в миллисекундах.

Целое положительное число: чем ниже значение, тем выше скорость движения, и наоборот.

Значение по умолчанию

Hspace и Vspace – отступы по горизонтали и вертикали соответственно от бегущей строки до других объектов страницы в пикселях.

Указывается целое положительное число.

Значение по умолчанию

Пример — тег marquee

«-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd» >

«Content-Type» content= «text/html; charset=windows-1251» >
Тег

«400» bgcolor= «#FFFF00» behavior= «alternate» > Привет

«120» w >»32″ bgcolor= «#0099FF» behavior= «scroll»
direction= «up» > «img/peng_32.gif» >

«400» bgcolor= «#CCCCCC» behavior= «slide» direction= «right» >
«index.php» > «class5» > На главную

«720» bgcolor= «#0099FF» behavior= «alternate» loop= «3» >
Скорость и время задержки не указаны, поэтому установлены по умолчанию: 6 и 85.

«720» behavior= «alternate» loop= «3» scrollamount= «10» >
Скорость равна 10. Время задержки не указано — по умолчанию 85.

«720» bgcolor= «#0099FF» behavior= «alternate» loop= «3» scrolldelay= «100» > Скорость не указана — по умолчанию 6. Время задержки равно 100.

The Marquee Element Is History In HTML (And What To Use Instead)

Sharing is caring!

The Marquee Element

creates a scrolling display. is an MSIE extension, but is now supported by NS 7. is often regarded as one of the «evil» tags, and that perception alone might be enough reason to not use it. However, used lightly and with taste (and understanding that it will never render everywhere), isn’t such a bad tag. It can work well for announcements.

The basic use of is simple. Put most any kind of markup between and “.

is a text level element. By default has a WIDTH of 100%, so it might appear as a block level. However, if you set the width to something smaller than 100%, you might notice that the marquee is in line with the surrounding text.

The content of does not start scrolling until the “ element becomes visible.


Width and Height Attributes

WIDTH and HEIGHT set the dimensions of the marquee.

This code creates a marquee that is 200 pixes wide and 50 pixels tall:

Neither attribute is required. The default value for WIDTH is 100%. The HEIGHT defaults to the natural height of content as it appears in the width.

The Direction Attribute

DIRECTION indicates which direction the marquee scrolls. DIRECTION=LEFT , which is the default, indicates that the marquee starts at the right and moves leftwards across the page. DIRECTION=RIGHT indicates that the marquee starts at the left and moves rightwards across the page.

The Behavior Attribute

BEHAVIOR indicates how the contents scroll.

BEHAVIOR=SCROLL , which is the default, indicates that the content should scroll off the edge of the marquee area, then reappear on the other side. This code:

BEHAVIOR=SLIDE is almost the same, except that it indicates that when the leading part content reaches the left edge it should stop without scrolling off. Notice in this example that the contents stop scrolling as soon as the “H” reaches the left side:

BEHAVIOR=ALTERNATE makes the content bounce back and forth, all of it remaining visible all the time (assuming of course that it all fits).

Produces this result:

The Scrolldelay Attribute

SCROLLDELAY , together with SCROLLAMOUNT , sets the speed of the scrolling. Marquee moves the content by displaying the content, then delaying for some short period of time, then displaying the content again in a new position. SCROLLDELAY sets the amount of delay in milliseconds (a millisecond is 1/1000th of a second). The default delay is 85.

The following examples show the default SCROLLDELAY (i.e. when it is not set), a value of 500 (half a second) and 1000 (one full second).

SCROLLDELAY is good for making the marquee slower than the default but it’s not much help in speeding it up. Try SCROLLAMOUNT to speed up the marquee.

The Scrollamount Attribute

SCROLLAMOUNT , together with SCROLLDELAY , sets the speed of the scrolling. Marquee moves the content by displaying the content, then delaying for some short period of time, then displaying the content again in a new position. SCROLLAMOUNT sets the size in pixels of each jump. A higher value for SCROLLAMOUNT makes the marquee scroll faster. The default value is 6.

The following examples demonstrate the default value for SCROLLAMOUNT , a value of 20 and 50.

The BGColor Attribute

BGCOLOR sets the background color of the marquee.

Gives us this marquee:


HSpace and VSpace Attributes

HSPACE sets the horizontal space to the left and right of the marquee. VSPACE sets the vertical space at the top and bottom of the marquee.

HSPACE has no effect unless you also use the HSPACE attribute. These three code examples show the default value of HSPACE (which is 0) and two larger values:

Which give us these marquees:

VSPACE sets the space between the marquee and text before and after. These code examples show the default value of VSPACE (also 0) and two larger values:

The Loop Attribute

LOOP sets how many times the marquee should loop. The default value (i.e. if you don’t put a LOOP attribute at all) is INFINITE , which means that the marquee loops endlessly.

This code creates a marquee that loops twice:

One of the problems with LOOP is that the content disappears after the last loop. To set the marquee so that the content is visible when the looping is done set BEHAVIOR=SLIDE :

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

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

На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Есть масса других современных способов как можно донести до пользователя полезную информацию (flash-анимация, баннеры).

Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript, но из-за нецелесообразности его применения (он нагружает страницу), мы даже не станем его рассматривать.

HTML тег

Итак, в HTML есть специальный тег для создания бегущей строки: . . У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.

Атрибуты и параметры

1. w — задает ширину бегущей строки в пикселях/процентах. Те, кто знаком с html наверняка знакомы с таким атрибутом. Например:

  • w — задает ширину в 40% в зависимости от ширины блока, в котором находится объект;

2. height=»число/процент» — задает высоту бегущей строки в пикселях/процентах. Пример можно привести такой же как и с первым атрибутом. Например:

  • height=»400px» — задает высоту в 400 пикселей;
  • height=»30%» — задает высоту в 30% в зависимости от высоты блока, в котором находится объект;

Примечание : если бегущая строка состоит только из одной строки, то высоту можно не указывать, поскольку она автоматически определиться в зависимости от размера шрифта, который задается параметром font-size: Npx .


3. bgcolor=»цвет» — задает цвет фона контейнера. Выбрать цвет можно на странице: коды html цветов. Примечание : если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.

4. behavior=»параметр» — это один из самых важных атрибутов бегущий строки. Он задает поведение бегущей строки. Имеет довольно много различных вариантов:
• alternate — бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:

А так эта строка выглядит на сайте:

• scroll — бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:

5. direction=»параметры» — задает направление движения бегущей строки. Может принимать следующие значения:
• down — движение сверху вниз. Например:

6. hspace=»число» — задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img.

7. vspace=»число» — задает отступ по вертикали до других объектов.

8. loop=»число» — какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.

9. scrollamount=»число» — скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:

10. scrolldelay=»число» — задает задержку между шагами бегущей строки в миллисекундах. Например:

Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:

Бегущая строка. HTML — коды бегущей строки

Бегущая строка. HTML — коды бегущей строки
Тег создает бегущую строку на странице. На самом деле содержимое контейнера не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.

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

behavior- тип движения со следующими значениями:

scroll- циклическая,
alternate- перемещение текста от одного края к другому
slide- остановка текста у одного края
direction- направление текста

up- весь текст идет снизу вверх
down- весь текст идет сверху вниз
left- текст идет налево
right- текст идет направо

Также используются следующие атрибуты:

scrollmount- шаг перемещения текста за заданный интервал времени со значениями в пикселях:
scrollmount- “1” “2” “3” ваш выбор
scrolldelay- интервал между шагами бегущей строки в миллисекундах к примеру:
scrolldelay- “100” “150” “200” ваш выбор
loop- число проходов текста
loop- “infinite”-постоянное прокручивание
loop=-“5” ваш выбор
hspace-“0”-ваш выбор-отступ поля справа и слева от бегущей строки в пикселях
vspace- “0”-ваш выбор-отступ поля сверху и снизу от бегущей строки в пикселях
width-“?” задает ширину бегущей строки в пикселях или процентах от ширины экрана
height-“?” задает высоту бегущей строки в пикселях или процентах
бегущая строка -определяет цвет текста в бегущей строке

«Приморско-Ахтарский молочный завод» приглашает на дегустацию молочной продукции в молочный павильон центрального рынка по четвергам и субботам с 9-00 до 12-00.

ваш текст здесь


ваш текст здесь

ваш текст здесь

ваш текст здесь ваш текст здесь ваш текст здесь ваш текст здесь

Останавливаем строку наведением курсора мыши

« П Л Я Ш Е М и П О Е М ! !»

Можно типа информера прикрутить:
На Азовском побережье есть небольшой оазис зелени и тишины — это город Приморско-Ахтарск.
И совсем не случайно многие стремятся провести здесь свои летние или весенне-осенние отпуска.
Приморско-Ахтарск — это город необычного уклада жизни, какой трудно сыскать на Азовско-Черноморском побережье.

8,663 просмотров всего, 7 просмотров сегодня

в HTML

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

Так как тег не входит в спецификацию HTML и в любом случае код будет невалидным — внутри него вы можете размещать практически любые элементы, которые вы хотите скроллировать: строки или блоки текста, списки, объекты, таблицы и т.д.

Атрибуты

  • behavior — Устанавливает вид скроллинга содержимого элемента .
  • bgcolor — Цвет фона скроллируемого блока.
  • direction — Указывает направление, в котором будет происходить скроллинг.
  • height — Высота блока.
  • hspace — Устанавливает боковые поля свободного пространства между скроллируемым блоком и окружающим контекстом.
  • loop — Количество прокручиваний, после которого скроллинг прекратится.
  • scrollamount — Задает скорость скроллинга.
  • scrolldelay — Устанавливает задержку между движениями скроллируемых элементов.
  • truespeed — Убирает ограничение скорости прокрутки.
  • vspace — Устанавливает поля сверху и снизу между скроллируемым блоком и окружающим контекстом.
  • width — Ширина блока.

Тип тега

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

Пример HTML: применение тега MARQUEE

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Нет Нет Нет Нет

Тега нет в спецификации HTML, поэтому если его использовать будет невалидный код.

Зачем нужна бегущая строка на сайте и как создать ее самостоятельно?

А все бегут, бегут! И строка бежит. Стоп! Какая строка бежит? Конечно же, бегущая и, конечно же, перед глазами пользователей на чужом сайте. И себе хотите такую? Не беда, сейчас научимся, как сделать бегущую строку самостоятельно.


Кто и куда бежит?

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

Бегущая строка для сайта была популярна еще несколько лет назад. Тогда ее использовали в качестве новостной ленты или для отображения рекламных текстов. Главной проблемой такой строки было ее постоянство, которое вскоре надоедало.

Речь о том, что для замены бегущего текста нужно было часто залазить в html код сайта и менять его на новый. Понятно, что сильно часто этого не делали.

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

Бегущая строка может быть использована как вывеска для названия сайта или его раздела. Также она идеально подойдет для размещения какой-нибудь умной мысли, которая может стать еще одним способом привлечения внимания со стороны посетителей сайта.

Бегущая строка, написанная на html

Бегущая строка на сайте html – это самый легкий вариант ее реализации с широким диапазоном для творчества.

За движение текста в html отвечает тег . Его синтаксис:

У этого тега много значений и атрибутов:

1) direction – устанавливает направление движения текста. Возможные значения атрибута:

  • left- в правую сторону;
  • right – влево;
  • up – вверх;
  • down – вниз;

2) behavior – отвечает за тип скроллинга. Принимаемые значения:

  • scroll – движение текста в одном направлении;
  • slide – одноразовое движение с последующей остановкой ( всплывающий текст );
  • alternate – в заданном направлении и назад.

3) loop – определяет количество циклов повторений. Возможные значения:

  • infinite – бесконечное количество циклов ( значение задано по умолчанию ).
  • Целое число.

4) scrollamount – задает скорость перемещения бегущей строки. Принимает целое значение.

5) width – задается длина области перемещения.

6) height – задается высота области перемещения.

7) scrolldelay – устанавливает время задержки между циклами в миллисекундах.


Остальные атрибуты тега являются общестилевыми для всех элементов языка гипертекста.

Тег был создан специально под браузер Internet Explorer . До недавнего времени его не воспринимали некоторые другие браузеры, но сейчас его видят все.

И если немного « поиграться » с кодом, то можно заставить двигаться не только текст, но и картинку. А это уже начальный уровень анимации, господа!

Вот код этого примера:

Бегущая строка для Joomla

Владельцам сайтов на основе CMS приведенный выше пример не подойдет. Точнее, подойдет, но нужно знать, куда можно « влепить » этот пример в html код. А это непросто.

Все CMS построены на основе php , который является серверным языком программирования. Именно на нем написан код, отвечающий за генерацию страниц сайта. То есть каждый элемент страницы сайта (« подвал », « шапка ») генерируется во время выполнения кода. Так что редактировать код php своего сайта на CMS не стоит.

Бегущая строка для joomla может быть реализована с помощью установки специальных плагинов. Один из них называется Moving Text . Рассмотрим его установку по шагам:

1. Заходим в панель управления Joomla . Через пункт верхнего меню « Расширения » переходим в « Менеджер расширений ».
2. На вкладке менеджера « Установка » выбираем вариант загрузки и жмем на кнопку « Установить »:

3. Затем переходим в « Менеджер плагинов ».
4. В списке внизу находим нужный плагин. Отмечаем его и нажимаем вверху на кнопку « Изменить ». Рядом с ней находится кнопка « Включить », служащая для активации расширения:

5. В следующем окне в полях « Основные параметры » устанавливаем параметры отображения бегущей строки ( длина, скорость и интервал между циклами ). После внесения изменений не забудьте нажать на кнопку « Сохранить » ( вверху справа ).
6. Затем через пункт главного меню « Материалы » переходим в « Менеджер материалов ». В нижнем списке отмечаем галочкой нужный материал и жмем на кнопку « Изменить » ( кружок с карандашом ).
7. В редакторе жмем на кнопку « html ». На экране откроется окно редактора кода. Туда вставляем < text=Нужный текст >. Вместо « Нужный текст » пишем то, что нам нужно, и жмем на « Обновить »:

После этого в редактируемом материале появится бегущая строка:

Другие варианты реализации бегущей строки

Бегущий текст можно реализовать не только с помощью html и установкой плагинов. Неплохим считается вариант реализации на javascript . Вот пример его действия:

Вот кусок кода, который размещается в теге :

А вот кусок скрипта, который нужно поместить в месте отображения бегущей строки:

Также можно реализовать бегающий текст с помощью библиотеки jquery :

Код примера приведен полностью. При желании css , jquery и html можно разнести по отдельным файлам:

Что в итоге?

Как видно из примеров, из всех реализаций бегущей строки самым «легковесным» является вариант на html . Да и его функционал намного проще для понимания и освоения. Но такая реализация не подойдет для сайтов на CMS . Для них остаются лишь плагины.

в HTML

Тег — элемент языка html, применяемый для создания на web-странице бегущей строки. Но этим тег не ограничивается. Используя этот элемент, можно на web-странице перемещать и другие элементы — тексты, таблицы, изображения и др. и не только по горизонтали, но и по вертикали. Наибольшего эффекта от применения тега можно добиться, если удачно подобрать атрибуты.


behavior . Задает тип движения содержимого контейнера .

bgcolor . Цвет фона.

direction . . Указывает направление движения содержимого контейнера .

height . Высота области прокрутки.

hspace . Горизонтальные поля вокруг контента.

loop . Задает, сколько раз будет прокручиваться содержимое.

scrollamount . Скорость движения контента.

scrolldelay . . Величина задержки в миллисекундах между движениями.

truespeed . . Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.

vspace . Вертикальные поля вокруг содержимого.

в HTML

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

Так как тег не входит в спецификацию HTML и в любом случае код будет невалидным — внутри него вы можете размещать практически любые элементы, которые вы хотите скроллировать: строки или блоки текста, списки, объекты, таблицы и т.д.

Атрибуты

  • behavior — Устанавливает вид скроллинга содержимого элемента .
  • bgcolor — Цвет фона скроллируемого блока.
  • direction — Указывает направление, в котором будет происходить скроллинг.
  • height — Высота блока.
  • hspace — Устанавливает боковые поля свободного пространства между скроллируемым блоком и окружающим контекстом.
  • loop — Количество прокручиваний, после которого скроллинг прекратится.
  • scrollamount — Задает скорость скроллинга.
  • scrolldelay — Устанавливает задержку между движениями скроллируемых элементов.
  • truespeed — Убирает ограничение скорости прокрутки.
  • vspace — Устанавливает поля сверху и снизу между скроллируемым блоком и окружающим контекстом.
  • width — Ширина блока.

Тип тега

Открывающий тег: необходим. Закрывающий тег: необходим.

Синтаксис

Пример HTML: применение тега MARQUEE

Поддержка версиями HTML

Версия: HTML 4.01 HTML 5 XHTML 1.0 XHTML 1.1
Поддержка: Нет Нет Нет Нет

Тега нет в спецификации HTML, поэтому если его использовать будет невалидный код.

Илон Маск рекомендует:  Как быстро создать свой сайт с нуля - все дело в движке сайта
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL