Hvordan lage en rulling overskrift på en webside

Hvordan lage en rulling overskrift på en webside


Rulling overskrift effekter fange oppmerksomheten til nettstedet besøkende. Disse effektene krever bare grunnleggende koding og webutviklere implementere dem ved hjelp av en enkel HTML-kode som kalles et stort telt. Rulletekst tag har elleve egenskaper som bestemmer dens utseende og funksjonalitet. For eksempel angi bakgrunnsfarge ved hjelp av \ "bgcolor \" eiendom eller sette hastigheten på rulletekst med scrollamount eiendom. Du kan inkludere disse egenskapene i kroppen koden i dokumentet eller bruke Javascript for å endre dem i sanntid. Bland og kombinere egenskapene til å skape unike rulling overskrift effekter på ditt nettsted.

Bruksanvisning

1 Opprett en ny HTML-fil og legge til denne koden til kroppen uttalelse:

<Marquee id = \ "testMarquee \" scrollamount = \ "15 \"> <h1> Dette er en overskrift </ h1> </ marquee>

Rulleteksten tag skaper et stort telt med en overskrift. Den scrollamount verdien er satt til 15. Økning som verdsetter å gjøre rulleteksten bevege seg raskere. Reduser verdien for å bremse teksten ned.

2 Legg disse fire knappe tager nedenfor teltet tag:

<Input type = \ "-knappen \" id = \ "start \" value = \ "start \" />
<Input type = \ "-knappen \" id = \ "stopp \" value = \ "stopp \" />
<Input type = \ "-knappen \" id = \ "riktige \" value = \ "riktige \" />
<Input type = \ "-knappen \" id = \ "venstre \" value = \ "venstre \" />

3 Legg denne koden til <script> i HTML-filen:

Var myMarquee
GÅ
window.onload = function () {

myMarquee = document.getElementById(\&quot;testMarquee\&quot;)

GÅ

document.getElementById('stop').onclick = stop

GÅ

document.getElementById('start').onclick = start

GÅ

document.getElementById('right').onclick = right

GÅ

document.getElementById('left').onclick = left

GÅ

}
GÅ

Denne koden legger en \ "onclick \" hendelseshåndterer til knappene. Når du klikker på en knapp, vil Javascript kalle tilsvarende funksjon.

4 Legg disse Javascript-funksjoner til skriptet seksjon:

funksjon stop () {

myMarquee.stop()

GÅ
}

funksjon start () {

myMarquee.start()

GÅ
}

funksjon høyre () {

myMarquee.direction = \&quot;right\&quot;

GÅ
}

funksjon venstre () {

myMarquee.direction = \&quot;left\&quot;

GÅ
}

Hver funksjon setter et stort telt eiendom eller utfører et stort telt funksjon.

5 Lagre filen og vise den i nettleseren din. Klikk på knappene for å observere Marquee atferd som Javascript-funksjoner de endrer sine egenskaper.

Hint

  • Markeringen er en ikke-standard tag som ikke støttes av HTML 4.01-spesifikasjonen. I tillegg organisasjoner som The Illinois senter for informasjonsteknologi og Web Accessibility fraråde bruk av rulleteksten fordi det fører til tilgjengelighetsproblemer for Internett-brukere med nedsatt funksjonsevne.