Содержание

HTML/Элемент marquee

Синтаксис

<marquee> ... </marquee>

Описание

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

Примечание

  • Необходимо учитывать, что использование данного элемента осуждается HTML Спецификациями.
  • Изначально данный элемент был создан для Internet Explorer, но впоследствии был добавлен и другими браузерами.

Поддержка браузерами

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

Спецификация

Верс.Раздел
HTML
2. 0		—
3.2—
4.01—
5.010.5.10 The marquee element[1]
5.110.5.11. The marquee element[1]
XHTML
1.0—
1.1—

  • [1] ‒ помечен как «устаревший».

Атрибуты

behavior
Устанавливает сценарий перемещения содержимого.
bgcolor
Задаёт цвет фона.
direction
Задаёт направление перемещения содержимого.
height
Задаёт высоту анимированной области.
hspace
Устанавливает размер отступа от левого и правого края бегущей строки.
loop
Устанавливает количество повторов анимации.
scrollamount
Устанавливает скорость анимации.
scrolldelay
Устанавливает время задержки между каждым движением анимации.
truespeed
Позволяет атрибуту «scrolldelay» иметь значение меньше «60».
vspace
Устанавливает размер отступа от верхнего и нижнего края бегущей строки.
width
Ширина анимированной области.

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент marquee</title>

<link type=»text/css» href=»ex-style.css» rel=»stylesheet»>
</head>
<body>
<h2>Пример использования элемента «marquee»</h2>
<marquee direction=»left»> «Текст идет влево» </marquee>
<marquee direction=»down»> «Текст идет вниз» </marquee>
<marquee direction=»right»><marquee direction=»down»> «Текст идет вправо-вниз» </marquee></marquee>
<marquee direction=»up»> «Текст идет вверх» </marquee>
</body>
</html>

Элемент marquee

Скорость 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″.

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

Это уже не банальное мигание, а периодический показ контента 🙂

Попробуем увеличить объём контента

статичная бегущая строчка

Но для этого примера необходимо ставить много пробелов между словами, так как ширина букв различна, подогнать достаточно трудно, что бы слова выводились точно по центру:&nbsp; &nbsp; &nbsp;статичная &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; бегущая&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;строчка

Гораздо проще дело обстоит с картинками, ширину картинок сделаем равную 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 (в бэкграунд можно устанавливать и анимированные картинки).

<table align="center" border="0" cellspacing="0" background="/button.png"> <tr><td><marquee scrollamount="88"&gt scrolldelay="5000"
<!--Начало кода внедрения информера для Витебска-->
<object type="application/x-shockwave-flash" data="http://img. gismeteo.ru/flash/fw88x31.swf?index=26666"
width="88">
<param name="movie"
value="http://img.gismeteo.ru/flash/fw88x31.swf?index=26666" />
<param name="menu" value="false" />
<param name="FlashVars" value="city=26666" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
<!--Конец кода внедрения информера для Витебска-->
<!--Код внедрения информера для Одессы-->
<!--Код внедрения информера для Владимира-->
</marquee>
</td></tr></table>

Если в браузер интегрирован флэш-плеер и разрешено выполнение активных компонентов веб-страницы, то мы можем убедится в мультиплицировании Flash-анимации, хотя звучит это противоестественно (анимация флэш-анимации). Но как обычно оговариваем, что подобные эффекты возможны в IE, а в браузерах других разработок, это будет выглядеть иначе, например в Опере, которая становиться всё более и более популярной, флеши в скроллинге ведут себя иначе чем в IE, и предложенный выше пример с информерами погоды, будет выводиться как последовательный скроллинг.
Итак выражение бегущая строка далеко не всегда соответствует действительности более подходящий термин: автоматический скроллинг или по-русски прокрутка, но надо заметить и это не всегда соответствует тому, что видят наши глаза.

в начало статьи
Старт и стоп в бегущей строке Апокриф веб-дизайна Бегущая строка JavaScript Marquee в текстовых браузерах Индексация Marquee

Обратная связь ВКонтакте Facebook Twitter Отзыв о сайте
A-CTO Дайджест, Карта сайта

10 лучших плагинов бегущих строк на jQuery и чистом JavaScript/CSS (обновление 2023 г.) более.

Это не только для новостных порталов, но также может быть использовано для деловых целей, веб-сайтов портфолио, блогов и многого другого.

В этом посте вы найдете 10 лучших плагинов jQuery, Vanilla JavaScript и Pure CSS, которые помогают разработчикам быстро создавать скроллеры для новостных и биржевых лент, скроллеров сообщений и любого другого текстового контента на веб-странице. Веселиться.

Первоначально опубликовано 16 мая 2019 г., обновлено 27 января 2023 г.

  • Библиотеки бегущих строк новостей Vanilla
  • Ленты новостей на чистом CSS

    • jQuery Плагины бегущей строки новостей:

    Плагин BBC News-Like Website Ticker с jQuery — Бегущая строка новостей

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

    [Демо] [Скачать]

    Гибкий и настраиваемый плагин jQuery News Ticker — Easy Ticker

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

    [Демо] [Скачать]

    Плагин jQuery с вертикальной прокруткой бегущей строки — vticker

    Простой плагин jQuery для создания виджета бегущей строки с вертикальной прокруткой с помощью одной строки кода javascript. Элементы могут быть приостановлены при наведении курсора мыши на элемент.

    [Демо] [Скачать]

    Бегущая строка с анимацией ввода и затухания — jQuery Ticker.js

    Легкий подключаемый модуль jQuery, который преобразует список HTML в оптимизированную для SEO бегущую строку с анимацией ввода и затухания. Полезно для профессионального демонстрации последних новостей и последних сообщений в блогах.

    [Демо] [Скачать]

    Минимальный плагин jQuery для бегущей строки новостей — inewsticker

    Простой и легкий плагин для новостной ленты jQuery, который поставляется с некоторыми полезными параметрами для настройки анимации, цвета/размера шрифта, направления текста и т. д. .

    [Демо] [Скачать]

    Vanilla JS News Ticker Libraries:

    Минимальный текстовый тикер с CSS3 и ванильным JavaScript текст с определенной скоростью.

    [Демо] [Скачать]

    Marquee Like Horizontal Scroller with Pure JavaScript — marquee.

    js

    marquee.js — это легкая библиотека JavaScript, которая позволяет горизонтально и бесконечно прокручивать HTML-элементы, такие как традиционный элемент выделения.

    [Демо] [Скачать]

    Smooth Marquee-подобный скроллер с чистым JavaScript – Marquee3000

    Marquee3000 – это небольшая, производительная библиотека JavaScript-скроллеров, которая применяет плавный, настраиваемый эффект прокрутки к любому HTML-контенту, как и устаревший Тег <шаг>.

    [Демо] [Скачать]

    Бегущая лента новостей на чистом CSS:

    Создание простой бегущей строки с использованием чистого CSS/CSS3 функция наведения и анимация на основе CSS3.

    [Демо] [Скачать]

    Чистый CSS/CSS3 Text Rotator

    Текстовый ротатор на основе CSS3, который позволяет прокручивать список текста, как бегущую строку.

    [Демо] [Скачать]

    Вывод:

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

    Хотите больше подключаемых модулей jQuery или библиотек JavaScript для создания отличной бегущей строки новостей в Интернете и на мобильных устройствах? Ознакомьтесь с разделами jQuery News Ticker и JavaScript/CSS News Ticker.

    См. также:

    • 10 лучших плагинов для прокрутки контента в виде бегущей строки в JavaScript
    • 10 лучших ротаторов текста на jQuery и чистом JavaScript/CSS

    Выравнивание изображения с бегущей строкой — HTML и CSS — Форумы SitePoint

    asasass 1

    Есть ли способ выровнять изображение по центру бегущей строки?

    Есть ли способ расположить изображение по центру?

    https://jsfiddle. net/rswjq81g/

    ПолОБ

    2

    асас:

    Есть ли способ расположить изображение по центру?

    https://jsfiddle.net/rswjq81g/

    В этой демонстрации нет бегущей строки?

    Когда вы говорите «по центру», вы имеете в виду « не по центру » в красной рамке, но по центру по вертикали в доступном пространстве над бегущей строкой?

    Что фактически означает, что он не будет центрирован в видео, а также означает, что кнопку воспроизведения нужно будет перемещать?

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

    asasass

    13 ноября 2022 г. , 16:17 3

    Плохо: здесь: https://jsfiddle.net/5u6fryw3/3/

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

    Что-нибудь из этого можно сделать?

    Знаете какие-нибудь хорошие генераторы x y pos?

    Изображение background-position: 188px 48px;

    Но это не помогает центрировать его.

    Это близко: https://jsfiddle.net/v28Lo9xj/1/

    background-position: 188px 35px;

    Это не сработает, потому что изображение не остается в центре.

    ПолОБ 4

    Бегущая строка имеет высоту 28 пикселей, поэтому вы можете расположить видео-один: после 28 пикселей вверх от нижнего края.

    .video-one::after{bottom:28px}

    Изображение центрируется в доступном пространстве.

    Если вы сделаете то же самое для .play, он должен синхронизироваться.

    .play {внизу: 28px;}

    1 Нравится

    5

    Изображение превращается в прямоугольник.

    Изображение сжимается.

    https://jsfiddle.net/y0j7p4gt/

    ПолОБ

    6

    асас:

    Изображение превращается в прямоугольник.

    Я думал, ты сам разберешься с этим. Высота уменьшается на 28 пикселей, поэтому размер фона изображения будет соответствующим образом изменен.

    напр.
    41,25% 79,52%

    Если мои расчеты верны,

    asasass 8

    Почему изображение здесь выглядит растянутым? https://jsfiddle.net/xvro2k9f/’

    Какой должна быть математика? 360% неправильно?

     background-position: center;
  размер фона: 56,25% 360%;
  фоновый повтор: без повтора;
  z-индекс:-1;

    Не похоже на это:

    PaulOB 9

    асас:

    Какой должна быть математика? 360% неправильно?

    360 / 640 = 0,5625 = 56,25 %

    360 / 360 = 1 = 100 %

    т. е. 56,25 % 100 %

    1 Нравится

    система Закрыто

    22 апреля 2023 г., 00:31 11

    Эта тема была автоматически закрыта через 91 день после последнего ответа.

    No related posts.