Ci z was, którzy piszą HTML od dłuższego czasu, mogą pamiętać ten element. Był to element specyficzny dla przeglądarki, który tworzył pasek przewijania tekstu na ekranie. Ten element nigdy nie został dodany do specyfikacji HTML, a obsługa tego interfejsu była bardzo różna w różnych przeglądarkach. Ludzie często mieli bardzo mocne opinie na temat stosowania tego elementu - zarówno pozytywnego, jak i negatywnego. Ale bez względu na to, czy go kochałeś, czy go nienawidziłeś, miało to na celu ukazanie treści, które przepełniały widoczne granice.
Częściowo dlatego, że przeglądarki nigdy nie zostały w pełni zaimplementowane, poza silną osobistą opinią, było to, że jest uważany za efekt wizualny i jako taki nie powinien być definiowany przez HTML, który definiuje strukturę. Zamiast tego efekty wizualne lub prezentacyjne powinny być zarządzane przez CSS. CSS3 dodaje moduł markizy, aby kontrolować, w jaki sposób przeglądarki dodają efekt marquee do elementów.
Nowe właściwości CSS3
CSS3 dodaje pięć nowych właściwości, które pomagają kontrolować sposób wyświetlania treści w ramce zaznaczenia: styl przepełnienia, w stylu markizy, marquee-play-count, marquee-direction i prędkość marquee.
Dostępne są opcje Wreszcie, naprzemiennie odbija treści z boku na bok, przesuwając się tam iz powrotem. Może być konieczne użycie przedrostków dostawcy, aby elementy markizy CSS działały. Są one następujące: Ostatnia właściwość pozwala określić, jak duże lub małe powinny być kroki, gdy zawartość przewija się na ekranie w ramce zaznaczenia. Aby marka działała, należy najpierw umieścić wartości z prefiksem dostawcy, a następnie przestrzegać wartości specyfikacji CSS3. Na przykład tutaj jest CSS dla markizy, która przewija tekst pięć razy od lewej do prawej wewnątrz pudełka o wymiarach 200x50.styl przepełnieniaThe styl przepełnienia Właściwość (którą omówiłem również w artykule CSS Overflow) określa preferowany styl dla treści przepełniających zawartość pola. Jeśli ustawisz wartość na linia marquee lub markiza-blok Twoje treści będą się przesuwać i wysuwać w lewo / prawo (linia marquee) lub w górę / w dół (markiza-blok).w stylu markizyTa właściwość określa, w jaki sposób zawartość zostanie przeniesiona do widoku (i na zewnątrz).zwój, ślizgać się i alternatywny. Przewijanie rozpoczyna się od zawartości całkowicie wyłączonej z ekranu, a następnie przesuwa się po widocznym obszarze, aż całkowicie zniknie z ekranu. Slajd rozpoczyna się od zawartości całkowicie poza ekranem, a następnie przesuwa się w poprzek, dopóki zawartość nie zostanie w pełni przeniesiona na ekran i nie będzie już więcej treści do przesuwania na ekranie.marquee-play-countJedną z wad korzystania z DUŻY NAMIOT elementem jest to, że markiza nigdy się nie zatrzymuje. Ale z właściwością stylu marquee-play-count możesz ustawić ramkę, aby włączać i wyłączać zawartość określoną liczbę razy.marquee-directionMożesz także wybrać kierunek przewijania zawartości na ekranie. Wartości Naprzód i rewers są oparte na kierunkowości tekstu, gdy styl przepełnienia jest linia marquee i w górę lub w dół, gdy styl przepełnienia jest markiza-blok.Szczegóły dotyczące marquee-Direction
styl przepełnieniaKierunek języka Naprzód rewers linia marqueeltr lewo dobrze rtl dobrze lewo markiza-blok w górę na dół prędkość marqueeTa właściwość określa, jak szybko zawartość przewija się na ekranie. Wartości są powolny, normalna, i szybki. Rzeczywista prędkość zależy od zawartości i przeglądarki wyświetlającej ją, ale wartości muszą być powolny jest wolniejszy niż normalna który jest wolniejszy niż szybki.Obsługa przeglądarki dla właściwości Markizy
CSS3 Prefiks dostawcy overflow-x: linia marquee;overflow-x: -webkit-marquee;w stylu markizy-webkit-marquee-stylemarquee-play-count-webkit-marquee-powtórzenieOznakowanie-kierunek: do przodu | do tyłu;-webkit-marquee-direction: forward | backwards;prędkość marquee-webkit-marquee-speednie ma odpowiednika -składka -webkit-marquee{ szerokość: 200px; wysokość: 50 pikseli; white-space: nowrap; przepełnienie: ukryte; overflow-x: -webkit-marquee; -webkit-marquee-direction: forward; -webkit-marquee-style: scroll; -webkit-marquee-speed: normal; -webkit-marquee-increment: mały; -webkit-marquee-repetition: 5; overflow-x: linia marquee; markiza: kierunek; styl markizy: przewijanie; prędkość marquee: normalna; marquee-play-count: 5;}
