Тег <marquee> создает бегущую строку на странице.
На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы
веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение
можно задать не только по горизонтали, но и вертикали, в этом случае указываются
размеры области, в которой будет происходить движение.
Первоначально тег <marquee> был предназначен
только для браузера Internet Explorer, но современные версии других браузеров
также понимают и поддерживают этот
тег.
Синтаксис
<marquee>...</marquee>
Атрибуты
behavior
Задает тип движения содержимого контейнера <marquee>.
bgcolor
Цвет фона.
direction
Указывает направление движения содержимого контейнера <marquee>.
height
Высота области прокрутки.
hspace
Горизонтальные поля вокруг контента.
loop
Задает, сколько раз будет прокручиваться содержимое.
scrollamount
Скорость движения контента.
scrolldelay
Величина задержки в миллисекундах между движениями.
truespeed
Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
vspace
Вертикальные поля вокруг содержимого.
width
Ширина области прокрутки.
Закрывающий тег
Обязателен.
Валидация
Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег MARQUEE</title>
</head>
<body>
<marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
Lorem ipsum dolor sit amet...
</marquee>
</body>
</html>
Атрибут behavior | htmlbook.ru
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
3.0+
1.0+
4.0+
1.0+
1.0+
1.0+
1.0+
Спецификация
HTML:
3.2
4.01
5.0
XHTML:
1.0
1.1
Описание
Устанавливает способ движения содержимого внутри элемента <marquee>.
Контент перемещается между правым и левым краем элемента.
scroll
Контент перемещается в направлении, заданным атрибутом direction,
затем скрывается за пределами области, после чего начинает движение с начала.
slide
Контент перемещается в направлении, заданным атрибутом direction,
доходит до края области и останавливается.
Значение по умолчанию
scroll
Пример
HTML 4.01IECrOpSaFx
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег MARQUEE, атрибут behavior</title>
</head>
<body>
<marquee bgcolor="#c0c0c0" behavior="alternate">Lorem
ipsum dolor sit amet. ..</marquee>
<marquee bgcolor="#c0c0c0" behavior="scroll">Lorem
ipsum dolor sit amet...</marquee>
<marquee bgcolor="#c0c0c0" behavior="slide">Lorem
ipsum dolor sit amet...</marquee>
</body>
</html>
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно.
Воспользуйтесь сервисом cssdeck.com или jsfiddle.net,
сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Создание бегущей строки в html
бегущая строка Бегущая строка создается с помощью тегов <marquee> и </marquee> Между этими тегами вставляется текст или рисунок,или все вместе,которые должны прокручиваться.В тег <marquee> вставляются атрибуты строки,примерно так:
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-«?» задает высоту бегущей строки в пикселях или процентах <font color=»#?»>бегущая строка</font> -определяет цвет текста в бегущей строке
Пример и код бегущей строки.
Без денег хорошо
но с деньгами лучше
Вот код этой строки. <marquee behavior=»scroll» bgcolor=»#D8FFD0″ scrollAmount=»3″ scrolldelay=»10″
> <font size=»5″ color=»#0804FB»>Без денег хорошо</font>
<img src=»dollar.jpg»> <font size=»5″ color=»#0804FB»>но с деньгами лучше
</font></marquee>
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 34-ая.
Учебник по Html для чайников. Дополнительные.
Ступенька 34-ая.
Эту главу мы с вами посвятим специфическом тэгу, речь пойдет о тэге Marquee — бегущей строке (текста).
Тэг Marquee поддерживается только Internet Explorer, но многих людей, начинающих осваивать сайтостроение, это не останавливает, и они с удовольствием его употребляют. Т.к. это болезнь массовая, то мне придется рассказать подробно о тэге Marquee (те, у кого броузер не IE, не будут в этой главе оставлены за бортом, для них я бросила спасательный круг в конце главы).
Как видите, все просто. Текст, который мы помещаем в тэге , становится бегущей строкой.
Все атрибуты тэга <marquee></marquee> вам уже знакомы: bgcolor — цвет фона бегущей строки, height — высота строки, width — ширина строки.
Также для бегущей строки можно задать и другие знакомые вам атрибуты — hspace, vspace и align (тот, кто их не помнит, срочно возвращается к Простейшим ступенькам и освежает свою память). В наш пример я их вводить не буду, вы можете сами.
Атрибут loop задает сколько раз прокрутится строка, в нашем примере указано loop=»2″ — 2 раза, а это значит, что к тому моменту, когда вы дойдете до этого примера, строка может уже не бежать, поэтому обновите страницу и убедитесь в правоте моих слов — строка пробежит только два раза.
Далее будут лишь описания атрибутов без наглядных примеров, подставляйте их сами в код, и смотрите, что будет получаться.
Direction — задает направление движения бегущей строки — direction=»left» (right, up, down) — движение влево (вправо, вверх, вниз).
Behavior — поведение строки — behavior=»scroll» (slide, alternate). Scroll — обычная прокрутка (можно не прописывать, оно так и есть по умолчанию). Slide — прокрутка с остановкой, строка пробегает до края и останавливается. Если одновременно с behavor=»slide» употребить параметр loop, то строка прокрутится установленное количество раз и остановится у края. Alternate — строка будет двигаться от края к краю.
Scrollamount — скорость движения строки, scrollamount=»1″. Может принимать значения от 1 до 10. 1 — самое медленное движение, 10 — самое быстрое.
Уф! Все 🙂
Теперь, когда мы разобрались со всеми параметрами тэга Marquee, я немного позанудничаю, призывая читателя все же быть разумным и не особо злоупотреблять этим тэгом. Вернитесь хотя бы к первому примеру. Посмотрите на бегущую строку задумчиво и признайтесь, что она мешала вам сосредоточиться на чтении и ознакомиться с этой главой, а также смотрится она не очень, непрофессионально, любительски. Уже эти два аргумента должны заставить вас задуматься, нужны ли бегущие строки вам на вашем сайте.
Кроме того, текст самой бегущей строки не удобно читать, что опять же служит аргументом против нее. Итак, это не красиво и не удобно, а значит не особо и нужно, только если вы хотите побаловаться в пределах вашей домашней страницы ради интереса.
Итак, что делать, если вы не признаете Internet Explorer, или хотите, чтобы пользователи других броузеров увидели вашу бегущую строку. Помните, в предыдущих главах я упоминала CSS – таблицы каскадных стилей, дополнительное средство, при помощи которого вы можете управлять содержимым ваших страниц.
Кроме таблиц каскадных стилей мы можем вводить в наш html-документ и скрипты, это опять же замечательное средство, чтобы делать ваш неуклюжий HTML-документ динамичным. О скриптах, и как их вводить в наш документ, мы опять же поговорим попозже.
Но почему я завела о них разговор? Дело в том, что при помощи скриптов мы можем ввести бегущую строку в наш документ, это будет правильнее, и это увидят пользователи не только Internet Explorer, но и других броузеров.
Коды скриптов с бегущей строкой в можете посмотреть здесь и здесь, чтобы потом ввести бегущую строку на ваш сайт, если вам этого очень хочется.
Бегущая строка средствами HTML, тэг marquee
Есть не очень распространненый тэг в HTML — marquee, который прокручивает содержимое в нем. Именно об этом тэге и пойдет речь в этой статье.
Довольно часто встречаются случаи, что даже бывалые веб-программисты удивляются увидев этот тэг.
Тэг <marquee></marquee> динамически прокручивает содержимое по определенным в нем правилам.
При помощи этого тэга можно создавать бегущие строчки со ссылками или текстом, который должен привлекать внимание посетителей страницы. Так же удобно создавать бегущие строки с изображениями-ссылками, например партнеров компании.
Пример обычной бегущей строчки:
<marquee>Бегущая строчка</marquee>
Бегущая строчка
Теперь давайте рассмотри атрибуты тэга <marquee>, который позволяют изменить стиль бегущей строки или ее вид:
Атрибут behavior — задает тип движения содержимого тэга, может принимать следующие значения(по-умолчанию scroll):
Alternate — Контент перемещается между правым и левым краем элемента.
Scroll — Контент перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала.
Slide — Контент перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.
Атрибут direction — указывает направление движения содержимого тэга, может принимать следующие значения(по умолчанию left):
Down — Движение сверху вниз.
Left — Движение справа налево.
Right — Движение в правую сторону.
Up — Движение вверх.
Атрибут loop — задает, сколько раз будет прокручиваться содержимое, может принимать следующие значения(по умолчанию -1):
Любое целое положительное число
-1 означает бесконечное повторение
Атрибут scrollamount — скорость движения содержимого, может принимать следующие значения(по умолчанию 6):
Любое целое положительное число
Атрибут scrolldelay — величина задержки в миллисекундах между движениями, может принимать следующие значения(по умолчанию 85):
Любое целое положительное число миллисекунд
Теперь несколько примеров использования тэга <marquee>:
Атрибуты и параметры скорости в тэге бегущей строки
Июль 2009 г.
Смещение контента-ScrollAmount
Эффект Бегущая строка есть последовательная отрисовка и удаление контента, со смещением определённым количеством пикселей, и через заданный период времени в миллисекундах. По умолчанию смещение отрисовки контента в тэге <marquee> равно 6 пикселей, атрибутом смещения является scrollamount (монтирование прокрутки: англ.), в некоторых веб-браузерах при отсутствии этого атрибута, параметр смещения может быть от 2 до 6 пикселей, проверить это можно просматривая документ, с бегущей строкой с кодом <marquee></marquee> разными версиями и типами браузеров, зрительно это воспринимается как разница в скорости.
Бегущая строка
Если скорость монтирования важна в различных версиях браузерах, атрибут scrollamount, выставляется обязательно. Параметр «0» в scrollamount, запрещает скроллинг контента, значение «1», есть минимальное расстояние между отрисовками:<marquee scrollamount=»1″>Бегущая строка</marquee>
Бегущая строка
В большинстве программ автоматической генерации HTML-кода, этот атрибут, чаще всего задаётся в 2 пикселя. Мы для примера просмотрим вариант со смещением в 10 пикселей scrollamount=»10″.
Бегущая строка
Задержка смещения-ScrollDelay
Скорость движения строк в приведённых примерах, воспринимается, разной, однако период времени монтирования во всех трёх примерах одинаков. В различных версиях по умолчанию скорость монтирования определяется операционной системой в которой установлен браузер. Для Windows она равна 85 миллисекундам. Пока Internet Explorer оставался единственным веб клиентом воспроизводившим бегущую строку в тэге marquee, речь шла о разности скорости в IE (Windows) и IE (Macintosh), сейчас когда самые последние версии популярных браузеров (Opera, Mozilla, Konqueror) тоже стали воспроизводить тэг бегущей строки, а они портируются не только в Windows, но и в Юниксы и юниксоподобные операционные системы, разница в скорости достаточно заметна. Поэтому установка параметров скроллинга актуальна, при построении сюжетов в которых скорость движения контента имеет значение. Период времени между отрисовками задаётся атрибутом scrolldelay (задержка монтирования: англ.) в миллисекундах (1 msek=0,001 sek), по умолчанию задан параметр 0, т.е. задержка определяется операционной системой. Для управления задержкой задаётся любое целое число больше значения установленного в ОС. Для наглядности установим задержку в две секунды, и расстояние между отрисовками в 100 пикселей. <marquee scrollamount="100" scrolldelay="2000">Бегущая строка</marquee>
Бегущая строка
Снятие ограничения задержки смещения-TrueSpeed
Для снятия дефолтной задержки операционной системы, используется атрибут truespeed (верная скорость: англ.). В html разметке этот атрибут записывается так: <marquee scrolldelay=»» truespeed>, в xhtml соответственно <marquee scrolldelay=»» truespeed=»truespeed»>. Установим задержку отрисовки 20 миллисекунды, для данной страницы: <marquee scrolldelay=»20″ truespeed=»truespeed»>Бегущая строка</marquee>
Бегущая строка
Несмотря на то, что ограничение установлено операционной системой снято, в различных типах браузеров, скорость будет различна. Для сравнения ещё раз сделаем строку из первого примера. При желании и наличии нескольких клиентов в одной ОС, можно просмотреть эту страницу и убедиться в разнице воспроизведения (просто сверяя количество прокруток в обоих примерах, в IE строка с truespeed успевает прокрутится четыре раза, Opera или Mozilla два, в этих браузерах, скорость монтирования будет не менее 60 миллисекунд).
Бегущая строка
Минимальным значением естественно возможна задержка в 1 msek, scrolldelay=»1″, рассмотрим этот пример.
Бегущая строка
В Internet Explorer контент будет мелькать, а в Opera, Firefox скорость как сказано выше установится 60 мсек и это разумно, при скорости ниже 50-60, контент не воспринимается из-за эффекта мелькания (просмотр в IE, убедительно доказывает это) . Но если посмотреть строку со смещением в 1 пиксель (Пример 2), то хочется назвать её, не бегущей, а ползущей строкой, но визуально она приятна для глаз. Вот, что-бы получить бегущую, а не ползущую строку с плавной отрисовкой, установим <marquee scrolldelay=»10″ scrollamount=»1″ truespeed>Бегущая строка</marquee>
Бегущая строка
Такая строка более приемлема для просмотра.
Статичные варианты бегущей строки.
С помощью изменения параметров атрибутов монтирования и задержки монтирования контента в бегущей строке, она изменяется, то прыгающая, то ползущая, то летящая, добавим к этому перечню ещё несколько вариантов. Установим в таблицу тэг marquee с такими параметрами, чтобы смещение (шаг) монтирования и длина пробега оказались в одном порядке по количеству пикселей: <table border="1" align="center"><tr><td><marquee scrollamount="130" scrolldelay="0">Бегущая строка</marquee></td></tr></table>
Бегущая строка
Получается не бегущая строка, а мигающий контент или как это принято называть от английского (blink) блинкующий. В Mozill’ах такой эффект задаётся через CSS, в IE он не выполняется. Но в отличии от blink в scrolldelay есть возможность изменять параметр. Установим в него задержку в 5 сек: scrolldelay=»5000″.
Бегущая строка
Это уже не банальное мигание, а периодический показ контента 🙂
Попробуем увеличить объём контента
статичная бегущая строчка
Но для этого примера необходимо ставить много пробелов между словами, так как ширина букв различна, подогнать достаточно трудно, что бы слова выводились точно по центру: статичная бегущая строчка
Гораздо проще дело обстоит с картинками, ширину картинок сделаем равную 150 пикселей, возьмем, четыре урбанистических пейзажей. Тэг прокручивания поместим в табличную ячейку. Почему в табличную ячейку, да можно всё, тоже самое сделать и в DIV, и это будет более правильно, но не любят Опера и Мозилы, когда marquee помещена в леер, они начинают плевать на указанные размеры такого леера растягивают его, не выполняют параметры тэга, а в таблице терпят и всё выполняют.
<table border="0" align="center"><tr><td><marquee scrollamount="150" scrolldelay="4500"><img src="/img/show1.gif" /><img src="/img/show2.gif" /><img src="/img/show3.gif" /><img src="/img/show4.gif" /></marquee></td></tr> </table> Для уменьшения кода, мы опустили альтернативный текст и размеры картинок, на работоспособность это не влияет, но устанавливать их желательно, особенно альтернативный текст.
Явно раздражает пустышка, что бы зрительно создать эффект слайд-шоу вставим в бэкграунд (background) таблицы картинку с изображением средневекового замка (в противоположность суперсовременным городам).
<table background="/img/show5.gif" border="0" align="center">(Прим: если при просмотре Internet Explorer’ом 8-й или 9-й версии, пример не работает, попробуйте включить режим совместимости с 7-й версией, в панели браузера, значок разорванного файла)
Получится вполне приемлемое слайд шоу.
Там где слайд-шоу, там напрашивается мультипликация, на самую скорою руку нарисуем в Paint три простеньких смайла (наверно мы все начинали освоение графики на компьютере, именно таким образом).
Теперь вставим это в табличку и тэг бегущей строки с таким параметром: scrollamount="63" scrolldelay="1000"
Конечно методом обычной Gif-анимации (не говоря уже о Flash или SVG) создаётся мультипликация гораздо лучшего качества, тем более в них можно устанавливать любую задержку для каждого кадра, в marquee мы можем позволить удвоить (утроить и так далее) время показа картинки установив две картинки (или более) подряд. Установим второй смайлик (с прямым взглядом) дважды.
Несмотря на неудобство с установкой задержки кадров (кстати в некоторых сюжетах если необходимо усложнённый показ можно вставить анимированный кадр) и в мультипликации с помощью marquee тоже есть некоторые преимущества, дело в том, что скроллируется любой тип картинок, правильнее сказать файла любого графического формата воспроизводимого в браузерах, для примера создадим леер (div в стиле помещённом в голову страницы укажем размеры соответствующие размеры совпадающие с картинками 74х55рх, и в бэкграунде установим цвет зелёный, хотя естественно можно было бы, установить в него картинку: #show {width:74;height:55;background:#3f0}, вставим тэг скроллинга:
<marquee scrollamount="74" scrolldelay="3000">
Смещение равно ширине картинки 74 пикселя, задержка три секунды (3000 мсек) и на всякий случай скрипты останова скроллирования наведением курсора. А контентом послужат пять картинок самых популярных на веб-страницах графических форматов BMP, PNG, JPG, GIF и GIF-анимация, опытные дизайнеры на глаз определяют (анимированный естественно определяет любой), где какой формат, но мы их подпишем и при желании их свойства можно посмотреть (для более удобного просмотра и установлены скрипты останова, хотя понятно, что они не всегда исполняются) Всё это в IExplorer должно воспроизводиться, как слайд шоу, а вот в Опере и Мозилах, вероятнее всего получиться обычный скроллинг, даже если бы мы сделали подобный стиль только для Marquee, т.е. без таблицы или леера. Поэтому лучше размещать такую конструкцию в таблице, это не современно, но зато наверняка.
В Marquee скроллируется любой веб-контент не имеющий абсолютной позиции относительно окна браузера или края html-страницы, заданных в скриптах или в расширениях CSS, и воспроизводимых в окне браузера, например Flash, для воспроизведения которой необходим интегрированных с браузером проигрыватель Flash, (у большинства пользователей он обычно установлен, ну и соответственно разрешена его работа, флэш активный элемент выполняемый на стороне клиента, т. е. в целях безопасности Activ X отключены). Итак возьмём для примера с популярнейшего сервера метеоновостей Gismeteo, flash— информеры «Фобос» выполненные размер кнопок 88х31, сообщающие о погоде в городах Витебск, Владимир и Одесса. Эти информеры не только выполнены во Flash Macromedia и сообщают ежесуточно погоду в этих городах, но и находятся на сервере Gismeteo, а гиперссылка установленная внутри флэши, вызывает загрузку страницы с подробным описанием погоды в том городе который указан в информере, естественно снова для удобства добавим скрипты останова скроллинга, ну а в бэкграунд нагло установим кнопку А-СТО в формате PNG: button.png (в бэкграунд можно устанавливать и анимированные картинки).
Если в браузер интегрирован флэш-плеер и разрешено выполнение активных компонентов веб-страницы, то мы можем убедится в мультиплицировании Flash-анимации, хотя звучит это противоестественно (анимация флэш-анимации). Но как обычно оговариваем, что подобные эффекты возможны в IE, а в браузерах других разработок, это будет выглядеть иначе, например в Опере, которая становиться всё более и более популярной, флеши в скроллинге ведут себя иначе чем в IE, и предложенный выше пример с информерами погоды, будет выводиться как последовательный скроллинг. Итак выражение бегущая строка далеко не всегда соответствует действительности более подходящий термин: автоматический скроллинг или по-русски прокрутка, но надо заметить и это не всегда соответствует тому, что видят наши глаза.
в начало статьи Старт и стоп в бегущей строке Апокриф веб-дизайна Бегущая строка JavaScript Marquee в текстовых браузерах Индексация Marquee
Обратная связь ВКонтакте Facebook Twitter Отзыв о сайте A-CTO Дайджест, Карта сайта
Конспект HTML: бегущая строка
Конспект HTML: бегущая строка
< на главную
Команда создания бегущей строки: <marquee>выводимый_текст</marquee> (marquee, согласно словарю, переводится как большая палатка, шатёр, палаточный павильон)
Если <marquee bgcolor=mediumpurple behavior=slide>бегущая строчка</marquee>, то бегущая строчка
(В дальнейшем я не привожу примеры, поскольку большое количество бегущих строк отвлекает от содержания страницы, а длительное всматривание в них способно вызвать головную боль. Да и тема второстепенная.)
Ширина и высота области, в которой происходит пробег строки.
б) hspace=»цифра», vspace=»цифра»
Отступы между бегущей строкой и прочим текстом соответственно по горизонтали и вертикали. Полностью аналогично тому, как это реализовано с изображениями.
в) bgcolor=»цвет»
Цвет фона.
г) loop=»цифра»
Количество пробежек строки. (loop — англ. петля, цикл) Для бесконечного зацикливания значение должно =-1. По умолчанию -1.
д) direction=»значение»
Направление прокрутки текста. (direction — англ. направление) Возможные значения: left/right/down/up. По умолчанию left.
е) behavior=»значение»
Характер прокрутки текста. (behavior — англ. поведение) Возможные значения:
scroll (по умолчанию)
Обычная прокрутка. (scroll — англ. прокручивать)
slide
Строка пробегает от края до края, затем останавливается. (slide — англ. скользить)
alternate
Добежав до противоположного края, строка поменяет направление движения. (alternate — англ. чередоваться)
ё) scrollamount=»цифра»
Скорость движения строки. (scroll — англ. прокручивать + amount — англ. количество, величина) По умолчанию =6.
Что такое бегущая строка HTML
Сканирование HTML — один из многих элементов этого языка. Вы, наверное, смотрели его в сети не раз. Этот тег имеет конкретное применение. Из-за неумелого обращения с этим элементом многие неопытные разработчики делают большую ошибку, вставляя их большое количество в свой документ. Мало кто из читателей любит что-то мигающее или сверкающее, в том числе бегущую строку HTML. В этой статье мы рассмотрим, как правильно обращаться с этим элементом и где его использовать?
Назначение .В HTML бегущая строка назначается при использовании тега