Synkronrulle i Javascript

January 22

Hvis du har to tekst områder på en webside og trenger å synkronisere rullefelt, kan du gjøre dette ved hjelp av jQuery Javascript-bibliotek og "scrollTop" funksjonen. Den "scrollTop" funksjonen returnerer antall piksler som er skjult fra visningen i en rullende tekstområde. Ved å få den "scrollTop" value for en tekstområdet og sette den som "bla" verdi for begge tekstområder, kan du koble rulle stater. Dette gjør at du kan bla opp eller ned i en tekstområdet og den andre tekstboksen vil bla opp eller ned med det samme antall piksler.

Bruksanvisning

1 Åpne nettsiders dokument i en HTML eller tekst editor. For å åpne dokumentet i en innfødt Windows tekst editor, høyreklikke på filen og klikk på «Åpne med." Klikk for å velge "Notisblokk" eller "WordPad", deretter "OK".

2 Klikk for å plassere markøren mellom "<head>" og "<head>" koder nær toppen av dokumentet. Trykk "Enter" for å lage en tom linje.

3 Type "<script src = 'http: //code.jquery.com/jquery-latest.js' type =" text / javascript "> </ script>" og trykk "Enter" for å koble din webside dokumentet til jQuery Javascript-bibliotek.

4 Type "<script type =" text / javascript ">" for å åpne et skript tag. Trykk enter."

5 Skriv "$ (function () {" og trykk "Enter." Dette kodelinje åpner hoved script funksjon uttalelse.

6 Skriv "$ ( 'textarea [id $ = textarea1]'). Rulle (function () {" og trykk "Enter." Dette kodelinje returnerer "id" og "bla" verdi for "textarea1" tekstområdet element .

7 Skriv "$ ( 'textarea [id $ = textarea2]')" og trykk "Enter". Dette kodelinje returnerer "id" verdi for andre tekstområdet.

8 Type ".scrollTop ($ ( 'textarea [id $ = textarea1]') scrollTop ().);" og trykk "Enter". Dette kodelinje påkaller "scrollTop" funksjon for å synkronisere "bla" verdier av begge desse.

9 Skriv "});" og trykk "Enter" for å lukke ut av "bla" variable definere kode. Skriv "});" igjen og trykk "Enter" for å lukke ut av hoved script funksjon.

10 Type "</ script>" for å lukke skript koder.

11 Klikk for å plassere markøren mellom "<body>" og "</ body>" tags og trykk "Enter" for å opprette en tom linje.

12 Type "<textarea id = 'textarea1' Cols = '20 'p =' 5 '>" og trykk "Enter" for å lage startkoden i den første tekstområdet.

1. 3 Skriv inn innholdet du vil skal vises i den første tekstområdet.

14 Type "</ textarea>" for å lukke de første tekst området koder.

15 Type "<textarea id = 'textarea2' Cols = '20 'p =' 5 '>" og trykk "Enter" for å lage startkoden i den andre tekstområdet.

16 Skriv inn innholdet du vil skal vises i den andre tekstområdet.

17 Type "</ textarea>" for å lukke den andre koder tekstområdet.

18 Klikk på "File" -menyen og klikk "Lagre".