Hvordan Synkron rulling i jQuery

Mange utviklere bruke jQuery fordi det gir dem mulighet til å plassere spennende visuelle effekter på sine websider. Det kan også hjelpe deg å holde div-elementer synkronisert. En HTML div er et nyttig beholder som inneholder andre objekter på en webside. Hvis du har to div-elementer, kan du bruke jQuery for å forårsake en div, barnet, for å rulle når du flytter scrollbar på den overordnede div. Denne evnen kan være nyttig, for eksempel ved visning av tekst i en div og bilder i en annen. En bruker kan bare bla gjennom div inneholder tekst, og div holder bildene vil bla automatisk.

Bruksanvisning

1 Start Notepad eller en HTML-editor. Åpne et HTML-dokument, og legge til følgende Javascript-kode til dokumentets hodedelen:

<Script type = "text / javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js&quot;> </ script>

Denne koden legger jQuery biblioteket til websiden.

2 Legg denne koden til dokumentets manuset seksjon:

Var parentObject = "My_Parent_Div";
Var childObject = "My_Child_Div";

$ (Document) .ready (function ()
{

Var forelder = "#" + parentObject;
Var barnet = "#" + childObject;

$ (Forelder) .scroll (function () {

$ (Barn) .scrollLeft ($ (forelder) .scrollLeft ());
$ (Barn) .scrollTop ($ (forelder) .scrollTop ());

});
});

Erstatt "My_Parent_Div" med navnet på div som vil kontrollere rulle av en annen div. Erstatt "My_Child_Div" med navnet på div at foreldrene div vil kontrollere. De jQuery scrollLeft og scrollTop funksjoner føre til at barnet div å rulle når rullefeltet på forelder div trekk.

3 Lagre dokumentet og vise den i en nettleser. Klikk på en av rullefelt på dine foreldre div, og dra rullefeltet. Rullefeltet på barnet div beveger seg også.

Hint

• Husk at den "klar" funksjonen som vises i koden setter opp rulle oppførsel hver gang Web siden lastes. For å deaktivere automatisk rulling, kommentere ut koden du har lagt til websiden dokumentet.