Содержание
Те из вас, кто долгое время писал HTML, могут помнить этот элемент. Это был специфичный для браузера элемент, который создавал баннер с прокруткой текста по экрану. Этот элемент никогда не добавлялся в спецификацию HTML, и его поддержка широко варьировалась в разных браузерах. У людей часто были очень сильные мнения об использовании этого элемента — как положительные, так и отрицательные. Но любили ли вы или ненавидели это, оно действительно делало цель сделать контент, выходящий за границы рамки, видимым.
Одной из причин того, что браузеры никогда не реализовывали его полностью, кроме сильного личного мнения, было то, что он считается визуальным эффектом и поэтому не должен определяться HTML, который определяет структуру. Вместо этого визуальные эффекты или эффекты представления должны управляться CSS. А CSS3 добавляет модуль Marquee для управления тем, как браузеры добавляют эффект Marquee к элементам.
Новые свойства CSS3
CSS3 добавляет пять новых свойств, чтобы помочь контролировать, как ваш контент отображается в выделенном поле: стиль переполнения, стиль выделения, выделение-воспроизведение, выделение направления и скорость выделения.
Переполнение стиль
Свойство overflow-style (которое мы также обсуждали в статье CSS Overflow) определяет предпочтительный стиль для содержимого, которое переполняет поле содержимого. Если вы установите значение «marquee-line» или «marquee-block», ваш контент будет перемещаться влево и вправо влево / вправо (marquee-line) или вверх / вниз (marquee-block).
шатровый стиль
Это свойство определяет, как содержимое будет отображаться (и выходить). Возможные варианты: прокрутка, слайд и альтернатива. Прокрутка начинается с того, что содержимое полностью за пределами экрана, а затем перемещается по видимой области до тех пор, пока все снова не будет полностью отключено от экрана. Слайд начинается с содержимого полностью за пределами экрана, а затем перемещается до тех пор, пока содержимое полностью не переместится на экран, и на экране больше не останется содержимого для скольжения. Наконец, альтернативный отскакивает содержимое из стороны в сторону, скользя вперед и назад.
шатровые-игры подсчет
Одним из недостатков использования элемента MARQUEE является то, что выделение никогда не останавливается. Но с помощью свойства style marquee-play-count вы можете настроить маркер на вращение контента в течение определенного количества раз.
шатровое-направление
Вы также можете выбрать направление прокрутки контента на экране. Значения вперед и назад основаны на направленности текста, когда стиль переполнения является выделенной линией, и вверх или вниз, когда стиль переполнения является выделенной строкой.
Детали направления-шатёр
| л | оставил | правильно |
| РТЛ | правильно | оставил |
| вверх | вниз |
шатровая скорость
Это свойство определяет, как быстро содержимое прокручивается на экране. Значения медленные, нормальные и быстрые. Фактическая скорость зависит от содержимого и браузера, отображающего его, но значения должны быть медленными, медленнее, чем обычно, что медленнее, чем быстро.
Браузерная поддержка Marquee Properties
Возможно, вам придется использовать префиксы вендоров, чтобы заставить работать элементы выделенного CSS. Они заключаются в следующем:
переполнение-х: выделенная линия; | overflow-x: -webkit-marquee; |
шатровый стиль | -WebKit-шатер стиль |
шатровые-игры подсчет | -WebKit-шатёр-повторение |
шатер-направление: вперед | назад; | -webkit-marquee-direction: вперед | назад; |
шатровая скорость | -WebKit-шатер скорость |
| нет эквивалента | -WebKit-шатёр-инкремент |
Последнее свойство позволяет вам определить, насколько большими или маленькими должны быть шаги, когда содержимое прокручивается на экране в выделенном поле.
Чтобы ваш шатер работал, вы должны сначала поместить префиксные значения поставщика, а затем следовать за ними со значениями спецификации CSS3. Например, вот CSS для выделенной области, которая прокручивает текст пять раз слева направо внутри поля 200×50.
{
ширина: 200 пикселей; высота: 50 пикселей; пустое пространство: nowrap;
переполнение: скрытое;
Переполнение-х: -webkit-бегущая строка;
-webkit-marquee-direction: вперед;
-webkit-marquee-style: scroll;
-webkit-marquee-speed: нормальный;
-webkit-marquee-increment: маленький;
-WebKit-Marquee-Повторение: 5;
переполнение-х: выделенная линия;
шатер-направление: вперед;
шатёр стиль: свиток;
скорость выдвижения: нормальная;
Marquee-Play-Count: 5;
} 
