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