Multimedia

Animacja MARQUEE

(tylko Microsoft Internet Explorer, Opera 7.20, Netscape 7/Mozilla/Firefox i Chrome!)

UWAGA!
Polecenie MARQUEE nie wchodzi w skład specyfikacji HTML 4.01 i jest rozszerzeniem przeglądarki Internet Explorer!

1. Podstawowa (domyślnie):

   <marquee>Tu wpisz tekst</marquee>

   Przykład:

   Przykład

   Wewnątrz znacznika <marquee>...</marquee> można umieścić nie tylko tekst, ale również inne elementy (np.: grafikę).

   Przykład

2. Określonego typu:

   <marquee behavior="typ">Tu wpisz tekst</marquee>

   gdzie jako "typ" należy wpisać:

   • "scroll" - tekst przesuwa się od prawej do lewej (domyślnie)
   • "alternate" - tekst przesuwa się od prawej do lewej, a następnie "odbija się" i powraca
   • "slide" - tekst przesunie się od prawej do lewej tylko raz, a później się zatrzyma i pozostanie nieruchomy

   Przykład:

   Przykład

3. O określonym kierunku przesuwania:

   <marquee direction="kierunek">Tu wpisz tekst</marquee>

   gdzie jako "kierunek" należy wpisać:

   • "left" - tekst będzie przesuwał się w lewo (domyślnie)
   • "right" - tekst będzie przesuwał się w prawo
   • "up" - przesuwanie w górę (nie obsługuje MSIE 3.01 ani Netscape 7)
   • "down" - przesuwanie w dół (nie obsługuje MSIE 3.01 ani Netscape 7)

   Przykład:

   Przykład

4. O określonym kolorze tła (nie obsługuje Netscape 7):

   <marquee bgcolor="kolor">Tu wpisz tekst</marquee>

   gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].

   Przykład:

   Przykład

5. O określonych rozmiarach na ekranie:

   <marquee width="x" height="y">Tu wpisz tekst</marquee>

   lub

   <marquee width="x%" height="y%">Tu wpisz tekst</marquee>

   gdzie "x" oznacza szerokość w pikselach, a "y" wysokość (również w pikselach).
   Natomiast "x%" oznacza szerokość w procentach ekranu, a "y" wysokość (również w procentach).

   Przykład:

   Przykład

6. O określonej odległości od tekstu (nie obsługuje Netscape 7):

   <marquee hspace="x" vspace="y">Tu wpisz tekst</marquee>

   gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość (również w pikselach).

   Przykład:

   Przykład

7. O określonej ilości powtórzeń:

   <marquee loop="n">Tu wpisz tekst</marquee>

   gdzie "n" oznacza ilość powtórzeń.

   Przykład:

   Przykład

8. O określonej szybkości przesuwania się tekstu:

   <marquee scrollamount="n">Tu wpisz tekst</marquee>

   lub

   <marquee scrolldelay="ms">Tu wpisz tekst</marquee>

   lub

   <marquee truespeeed="truespeeed" scrolldelay="ms">Tu wpisz tekst</marquee>

   gdzie jako "n" należy podać szybkość przesuwania w pikselach.
   Natomiast jako "ms" należy podać szybkość przesuwania w milisekundach (1 milisekunda = 0.001 sekundy, 1000 milisekund = 1 sekunda).

   Atrybut scrollamount="..." określa, o ile pikseli ma "przeskoczyć" tekst podczas jednego kroku animacji, natomiast scrolldelay="..." pozwala ustalić odstęp czasu pomiędzy tymi skokami. Łącząc oba parametry, mamy możliwość pełnej kontroli płynności ruchu (scrollamount) oraz jego szybkości (scrolldelay). Mniejsze wartości scrollamount="...", to mniej szarpany ruch, natomiast niższe scrolldelay="...", to szybsza animacja.

   W ostatnim przypadku podanie atrybutu logicznego truespeed="truespeed" (nie obsługuje MSIE 3.01) spowoduje, że wartość scrolldelay="..." będzie ściśle określała prędkość przesuwania. Bez tego atrybutu wszystkie wartości mniejsze lub równe 59 (milisekund), są automatycznie zaokrąglane w górę do 60 (czyli wpisanie: 5, 30 czy 60 da taki sam efekt). Atrybut truespeed="truespeed" jest zatem przydatny dla SCROLLDELAY < 60. Jeśli chcemy określić SCROLLDELAY > 59, podawanie atrybutu truespeed="truespeed" nie ma sensu (chociaż oczywiście można to zrobić).

   Przykład:

   Przykład

Bezpieczna animacja MARQUEE

Jeśli przeglądarka nie obsługuje animacji MARQUEE, tekst który do niej wpiszemy, prawdopodobnie zostanie normalnie wyświetlony na ekranie. Może to zburzyć całą estetykę strony. Można jednak sprawić, by treść MARQUEE nie została w ogóle wyświetlona, jeżeli użytkownik dysponuję inną przeglądarką niż Microsoft Internet Explorer:

<script type="text/javascript">
// <![CDATA[
var przegladarka = navigator.userAgent;
var ie = (przegladarka.indexOf("MSIE") != -1 && przegladarka.indexOf(") ") == -1 ? true : false);
var mozilla = (przegladarka.indexOf("Gecko") != -1 && przegladarka.indexOf("Netscape") == -1 ? true : false);
var netscape_ver = 0;
if (przegladarka.indexOf("Netscape") != -1)
{
	netscape_ver = parseInt(przegladarka.substring(przegladarka.indexOf("Netscape")+8));
	if (isNaN(netscape_ver)) netscape_ver = parseInt(przegladarka.substring(przegladarka.indexOf("Netscape")+9));
}
var opera_ver = 0;
if (przegladarka.indexOf("Opera") != -1)
{
	opera_ver = parseFloat(przegladarka.substring(przegladarka.indexOf("Opera")+5));
	if (isNaN(opera_ver)) opera_ver = parseFloat(przegladarka.substring(przegladarka.indexOf("Opera")+6));
}

if (ie || mozilla || netscape_ver >= 7 || opera_ver >= 7.2)
{
	document.write('<marquee>To jest animacja MARQUEE, która będzie widoczna tylko w przeglądarkach: Internet Explorer, Netscape 7+, Opera 7.2+ i Mozilla...<'+'/marquee>');
}

// ]]>
</script>

gdzie w miejsce wyróżnionego tekstu wpisuje się normalny znacznik <marquee>...</marquee>. Należy jednak pamiętać, aby nie używać w nim apostrofów (') ani nie przełamywać wiersza klawiszem Enter (wszystko musi być napisane w jednej linijce - tak jak pokazano).

• Obrazek
• Osadzenie pliku

• Do góry
• Strona główna
• Drukuj rozdział
• Komentarze