Cum de a face ticker de știri de pe site-ul web (HTML-tag - Marquee -)

Acasă → tutoriale HTML și sfaturi → Cum de a face un ticker pe site

În acest articol vă voi spune cum să facă un ticker pe site folosind un cod HTML special tag - . Pentru început, este de remarcat faptul că utilizarea unei linii de rulare ca unele animație pe site-ul - nu mai este la modă. Despre astfel de site-uri spun că sunt din secolul trecut.







În opinia mea, care rulează liniile în mediul actual este, în general, mai bine să nu folosească. In cazuri extreme, acestea pot fi folosite doar pentru o mai bună vizibilitate a informațiilor importante (de exemplu, promoțiile actuale, reduceri). Există o mulțime de alte metode moderne de modul de a transmite utilizatorului informații utile (flash-animație, bannere).

tag-ul HTML

sintaxa tag-ul

Atributele și parametrii

1. width = „număr / procentaj“ - definește lățimea în pixeli care rulează linie / procente. Cei care sunt familiarizați cu HTML, probabil, familiarizat cu acest atribut. De exemplu:

  • width = "240 de pixeli" - definește o lățime de minimum 240 pixeli;
  • width = „40%“ - definește o lățime de 40%, în funcție de lățimea blocului în care se află obiectul;

2. height = "număr / procent" - setează înălțimea Marquee în pixeli / procente. Exemplu este aceeași ca și cu primul atribut. De exemplu:

  • height = "400px" - specifică înălțimea de 400 pixeli;
  • height = „30%“ - specifică înălțimea unei 30%, în funcție de înălțimea blocului, în care obiectul;

Notă. În cazul în care linia de rulare constă dintr-o singură linie, înălțimea poate fi omisă, deoarece este determinată automat în funcție de dimensiunea fontului care este specificat parametrul font-size: Npx.

3. bgcolor = „culoare“ - setează culoarea de fond a containerului. Alege culoarea pe pagina poate fi: culori cod html. Notă. în cazul în care atributul bgcolor nu este specificat, fundalul implicit este culoarea fundalului paginii.







4. Comportamentul = „opțiune“ - este una dintre cele mai importante atribute ale unei linii de rulare. Acesta specifică comportamentul unei linii de rulare. Are destul de câteva opțiuni diferite:
• supleant - ticker se misca in cicluri: de la dreapta la stânga, apoi de la stânga la dreapta (se execută între marginile). De exemplu:

Și astfel linia arata Online:

Un șir atribut comportament = „alternativ“

• scroll - ticker se deplasează în afara regiunii în direcția care indică atributul de direcție (parametru), și apoi se repetă ciclic. În opinia noastră, această opțiune se găsește cel mai des. De exemplu:

Un șir de atribut comportament = „scroll“ direcția = „stânga“


• diapozitiv - foarte similar cu scroll, dar la capătul liniei este oprită și nu se mai repetă. De exemplu:

Un comportament atribut string = „slide-“ direcția = „dreapta“

5. Direcția = „Opțiuni“ - stabilește direcția textului de derulare. Poate lua următoarele valori:
• în jos - mișcarea de sus în jos. De exemplu:

Un șir de atribut comportament = „scroll“ direcția = „în jos“


• up - mișcare de jos în sus. De exemplu:

Un șir de atribut comportament = „scroll“ direcția = „sus“


• stânga - mișcarea de la dreapta la stânga. Notă: stânga este implicit. De exemplu:

Un șir de atribut comportament = „scroll“ direcția = „stânga“


• dreapta - mișcarea de la stânga la dreapta. De exemplu:

Un șir de atribut comportament = „scroll“ direcția = „dreapta“

6. hspace = „număr“ - setează indentarea liniei orizontale la celelalte obiecte. Un atribut este similar cu cel popular tag-ul img.

7. vspace = „număr“ - definește o adâncitură verticală la alte obiecte.

8. loop = „număr“ - de câte ori aveți nevoie pentru a defila prin conținut. Parametrul specifică numărul de care determină numărul de repetiții. Notă: Numărul de -1 înseamnă ciclu infinit de defilare. Implicit este setat la -1.

9. scrollamount = „număr“ - viteza textului defilare. Numărul definește numărul de pixeli, prin care pentru a muta obiectul într-un singur ciclu de ceas. Notă: Rata implicită este egală cu 6 pixeli / sec .. De exemplu:

Un atribut scrollamount string = "10"

10. scrolldelay = „număr“ - specifică întârzierea între etapele ticker în milisecunde. De exemplu:

Un atribut scrolldelay string = "500"

În final, am da Exemplul 2 folosind linii de rulare. EXEMPLU obiect utilizând div:

Runner element de div

EXEMPLU rulează imagini: