Атрибуты и параметры поведения тэга marquee, behavior

Поведение marquee

Атрибуты Marquee Скорость Marquee Направление Marquee Ускорение и замедление в Marquee Непрерывная бегущая строка

Атрибуты и параметры поведения тэга marquee

Сентябрь 2010 г.

В тэге marquee для управления поведением существует атрибут behavior (поведение англ.), по умолчанию он выполняется с параметром scroll (прокрутка англ.), т.е. постоянная прокрутка (скроллинг) установленного в тэг контента.

<marquee>SCROLL</marquee> равнозначно:<marquee behavior="scroll">SCROLL</marquee>SCROLL

Кроме scroll, в этом атрибуте есть ещё два параметра: alternate (изменять маршрут англ.) и slide (скользить англ.). Параметр alternate выполняется как возвратно-поступательное движение контента в пределах поля скроллирования.

<marquee behavior="alternate">ALTERNATE</marquee>ALTERNATE

(Прим: в Mozilla в отличии от Internet Explorer, Google Chrome, Opera, Firefox контент уходит за края скроллинга).

Параметру slide в плане демонстрационности не повезло, так как его задача: одноразовая прокрутка контента с последующей остановкой. На страницах по веб-дизайну в разделах посвящённых бегущей строке в тэге marquee, в примерах с этим параметром контент успевает остановиться к моменту его просмотра. Поэтому для его демонстрации применим замедление строки с помощью атрибута задержки отрисовки scrolldelay:

<marquee behavior="slide" scrolldelay="800">SLIDE</marquee>SLIDE

Дойдя до края поля скроллирования, слово SLIDE должно остановиться. Этот параметр вполне заслуживает внимания, исходя из того, что постоянно бегущая строка на страницах сайта, раздражает многих пользователей Web’а, а скольжение;, первоначально привлекая движением, внимание к контенту, останавливает и приводит его к привычному статичному виду. Но работает этот атрибут, только в IE.



Петли

Немного больше в демонстрационности, повезло атрибуту loop (петля англ.), он задаёт количество прокруток контента помещённого в тэг marquee. По умолчанию задано бесконечное количество прокруток; loop="-1" равнозначно loop="infinite", допустима запись параметра любым целым числом со знаком минус: loop="-2...-n", даже с нулём: loop="0", впрочем нет необходимости устанавливать этот атрибут, если нужен постоянный скроллинг (пока открыт html-документ). Он устанавливается тогда, когда требуется определённое количество прокруток (петель), для примера установим со значением 20 раз:

<marquee loop="20">LOOP</marquee>LOOP

После двадцати прокруток, контент (слово LOOP), больше не будет выводиться на страницу. Но это верно только для Internet Explorer и для последних версий Opera (8-9), а вот в других веб-браузерах или приложениях с просмотром HTML, воспроизводящих бегущую строку, можно не дождаться выполнения этого параметра, так же как и остановки контента в примере SLIDE. В этом случае эти примеры ничем не будут отличаться, от первого примера простого скроллинга: SCROLL. Подобная ситуация и в случае установки заданного количества разов прокрутки возвратно-поступательного скроллинга:

<marquee behavior="alternate" loop="22">ALTERNATE (22 loops)

В большенстве Мозилл, контент не остановиться до закрытия документа. В IE и Opera, контент остановиться обязательно. Местополжение остановленного контента, зависит от чётности петель. Если их кличество чётно (как в приведённом примере), то текст будет справа, так как петля, это проход в одну сторону, и каждая вторая возвращает контент к исходному положению, по умолчанию ход контента начинается справа налево. Нечётное количесвто петель естесвенно приводит контент к остановке слева.

<marquee behavior="alternate" loop="23">ALTERNATE (23 loops)

Для изменения начального положения контента используется атрибут задания направления direction, с параметром right, в скроллинге это смещение контента слева направо.

<marquee behavior="alternate" loop="24" direction="right">ALTERNATE (24 loops)

Если с петлями в alternate есть некоторая стабильность, то петли в slide, это более непредсказуемый вариант. Для сравнения сделаем контрольный вариант <marquee>MARQUEE</marquee>

MARQUEE<marquee behavior="slide" loop="30">SLIDE (loops)

В IE, контент в отличии от контрольного варианта, не уходит за край скроллинга, а удаляется в конце поля прокрутки; после выполнения всех (30) петель он остановиться, как при обычном выполнении slide с одной петлёй. В Opera этот вариант будет выполнен без петлевого атрибута, т.е. только одноразовый скроллинг. В некоторых приложениях может получиться возвратно- поступательный движение. Ну а в Mozilla Firefox ни slide, ни loop не выполняются, только постоянный скроллинг.

Отступление В Mozilla Firefox, бегущая строка, не только воспроизводится без выполнения большенства атрибутов, но иногда имеет место кратковременный сбой: отсутсвие контента установленного в marquee. (кстати в Опере тоже бывает сбой: кратковременный останов скроллинга). Ещё один момент заслуживающий внимания, в отличии от Оперы в которой при выключении поддержки браузером JavaScript, marquee продолжает работать, в Firefox, бегущая строка отключется вместе с отключением JavaScript. В этом не сложно убедиться, достаточно открыть инструменты (Tools) и снять в настройках содержания, флажок: JavaScript, и обновить страницу... контент в бегущих строках исчезнет.
Зато список участников проекта Firefox, который можно посмотреть в Справке (Help), О Mozilla Firefox, выполнен в виде красивого вертикального скроллинга, у кинематографистов это называется "барабан" в конце фильма, впрочем такой приём использован и в других продуктах от Mozill родных братьях Лиса: Flock, K-meleon, SeaMonkey и др. (впрочем и в продуктах других производителей большой список авторов прокручиваеться подобным образом, например в Dreamweaver Macromedia).
Ещё одна известная особенность у Firefox вернее сказать у Mozilla, естественно и у его наследников, (сам Мозилла после версии 1.8 прекратил существование, его интерфейс теперь у Морской Обезьяны - SeaMonkey) воспроизведение анимированных картинок в адресной строке, так называемых favicon'ax. Фавиконки могут быть с разным расширением, обычно это .ICO, но они бывают и Gif, PNG, JPG. Но анимированный гиф выводиться зверрьками Мозиллы. Специально для этой страницы автор поменял фавикон А-СТО (буква А), на анимированный, в котором попеременно меняются логотипы самых популярных браузеров Mozillы (Flock, Firefox, K-Meleon):
А в 2006 году, было несколько сообщений о том, что доблестные хакеры нашли уязвимость в коде Mozilla Firefox при выполнении marquee, через которую им удалось обрушить этот весьма популярный браузер.
Выход, второй версии Mozilla Firefox ознаменовалься растроением, а для кого-то растройством, в Debian завёлся новый зверь Ice Weasel (Ледяная Ласка) звучит для русского уха парадоксально, впрочем Ласка и Горностай для англичан одно и тоже. А ещё в Linux объявился Swift Fox (Лис Спринтер), на логотипе этого браузера, лис с очень вытянутой мордой, и уж очень она, морда, хитро выглядит. Ведь Swift Fox - проприетарный. В Linux? Проприетарность? А как же Open Sources?
Среди разработчиков в "барабане", мелькают русские фамилии, наверно пора им, выпускать версию "Песец" (Polar Fox - по-английски), а с установкой всех плагинов, что бы он превращался в Полный Песец. Ну, а пока мы дружно скачиваем и гоняем по Вебу третьего Лиса, автор естественно, первым делом скормил ему тэг marquee, и... FireFox 3.0 в отличии от предыдущих версий воспоизводивших его в обрезанном виде, теперь скроллирует со всеми атрибутами, ну точно, как IE. А ведь главная фишка нового Огнелиса, это его окончательная заточенность под технологии и сервисы Google. Но, прокрутка имён разработчиков в FireFox 3.0 отсутсутсвует.
Вот такой он, забавный зверёк - Огненный Лис.
А ведь начиналось с птички Феникс. Об этом можно прочесть, если в строке адреса написать about:mozilla и сделать переход.

Кенгуру

Любопытства ради, можно поэксперементировать с атрибутами поведения. Учитывая, то обстоятельство, что все атрибуты бегущей строки выполняюстся только в Internet Explorer'e, значит просмотр этих извращений лучше делать в нём или в его клонах.
(Кстати многие эффекты, можно создать для любого браузера, но с исползованием других методов, с помощью например JavaScript.)
Посмотрим, что будет происходить с контентом, в двух одинаковых тэгах, своего рода кенгуру: <marquee><marquee><!--Контент--></marquee></marquee>
Кенгуру, так кенгуру:

<marquee><marquee behavior="alternate" direction="down" height="60">Кенгуру</marquee></marquee>Кенгуру

Где direction="down" направление вертикального скроллинга снизу вверх, для этого примера можно использовать параметр up- вертикальный скроллинг сверху вниз, height="60" высота поля скроллинга, в данном случае длина пробега, без указания этого параметра, контент будет занимать всё свободное пространство контейнера.
Посмотрим другие варианты.

Бегущая строка с автоматической остановкой контента, внутренний тэг выполняет возвратно поступательный скроллинг, скорость отрисовки внутреннего и внешнего тэгов, одинаковы, в фазе совпадения направления в обоих тэгах, контент движется, а в противофазе из-за одинаковых скоростей, контент статичен. Время останова и пробега зависит от времени пробега длины скроллинга внутреннего marquee установленного атрибутом ширины width="100".

<marquee><marquee behavior="alternate" width="100">Кенгуру</marquee></marquee>Кенгуру

Бегущая строка с исчезновением контента. Удалим behavior="alternate", теперь направление скроллинга, внутреннего и внешнего тэга, совпадают, длина внутреннего скроллинга ограничена width="50".

<marquee><marquee width="50">Кенгуру</marquee></marquee>Кенгуру

Изменением параметров атрибутов можно получить различные варианты скроллинга. Так, что кенгуризм бывает не только забавен, но и полезен. Ну, а извращения в виде матрёшки из трех тэгов, не переварит наверное, даже IE.

Чтобы не утруждая себя, такой замечательной штукой, как JavaScript, скормить Огненому Лису, нашего кенгуру, уточним, почему этот австарлийский зверь не желает прыгать. А причина в том, что Firefox, Mozill'ы, Netscape-8 не выполняют параметры высоты height и ширины width скроллинга в тэге бегущей строки. Но зато, они прекрасно выполняют эти параметры в табличной ячейки и layer (лежаке), несмотря на то, что высота в таблице, атрибут невалидный. Ну а marquee скроллирует не только текст, но и подавляющее большенство html-форм. В том числе таблицы и лежаки, даже с помещённым в них marquee, проверим.

<marquee><table width="150" border="1"> <tr> <td><marquee behavior="alternate">Kenguru</marquee></td> </tr> </table> </marquee>
Kenguru

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

Но таблица немного грамоздкое сооружение, лучше использовать Layer. Создадим леер с именем kenga: <div id="kenga"></div>, запишем в голову страницы (<head></head>) через CSS его высоту и ширину: #kenga {width: 100px; height: 60px;}, и установим в него тэг бегущей строки, и всё это всместе, поместим ещё в один marquee, так как мы указали только размер леера, без указания цвета фона, рамки, он не просматривается на странице, только контент.

<marquee><div id="kenga"> <marquee behavior="alternate" direction="down" width="60">Kenguru</marquee> </div> </marquee>

Теперь кенгуру будет прыгать в Лисе.

Kenguru

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

Можно сделать возвратно-поступательный скроллинг объекта по диоганали, и для этого наиболее подходящим является картинка, возьмём логотип Internet Explorer'a размером 20х20 рх, в дань тому, что этот эффект наилучшим образом работает, именно в этом браузере.

<marquee behavior="alternate" style="width: 100px; height: 100px;"><marquee behavior="alternate" direction="down" style="width: 20px; height: 100px;"><img src="/img/ie.gif" alt="ie" width="20" height="20" /></marquee></marquee>

ie

В Лисе и Опере этот эффект работает, но с шероховатостями, которые портят впечатление.
Изменение направления диагонали выполняется изменением параметра направления direction, в одном из marquee, во внешнем это direction="right", но по умолчанию направление задано без указания direction как left, поэтому удобнее делать изменение во внутреннем marquee, т.е. заменим down, на up. А, что бы посмотреть как перемещается контент (в данном примере: картинка) установим цвета полей скроллингов. Внутренний сделаем зелёным (bgcolor="green"), а внешний красным (bgcolor="red")

ie



в начало статьи

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

eXTReMe Tracker Карта сайта