Vele ontwikkelaars gebruiken jQuery omdat het toestaat hen om boeiende visuele effecten op hun webpagina's. Het kan ook helpen u uw div-elementen gesynchroniseerd houden. Een HTML-DIV-element is een nuttig container die in het bezit van andere objecten op een webpagina. Als u twee div-elementen hebt, kunt u jQuery te veroorzaken een div, het kind, om te schuiven wanneer u op de bovenliggende div. de schuifbalk beweegt Dit vermogen zou kunnen nuttig zijn, bijvoorbeeld bij het weergeven van tekst in een div en afbeeldingen in een andere lidstaat. Een gebruiker kan gewoon Blader door het div-element met de tekst en het div-element houden van de beelden zal automatisch scrollen.
Start Kladblok of een HTML-editor. Een HTML-document opent, en voeg de volgende JavaScript-code aan de head-sectie van het document:
Deze code wordt de bibliotheek jQuery toegevoegd aan de webpagina.
Voeg deze code toe aan de documentsectie script:
var parentObject = "My_Parent_Div";
var childObject = "My_Child_Div";$(document).ready(function()
{var bovenliggende = "#" + parentObject;
var kind = "#" + childObject;$(bovenliggend niveau) .scroll (functie () {}
$(child).scrollLeft($(parent).scrollLeft());
$(child).scrollTop($(parent).scrollTop());});
});"My_Parent_Div" vervangen door de naam van het div-element waarmee de schuifbalk van een andere div. vervangen "My_Child_Div" met de naam van het div-element dat de ouder div zal bepalen. De functies van de jQuery scrollLeft en scrollTop veroorzaken de kind-div te scrollen wanneer de schuifbalk op het bovenliggende div-element beweegt.
Uw document opslaan en bekijken in een browser. Klik op een van de schuifbalken op uw ouder div en sleep de schuifbalk. De schuifbalk op het kind div-element beweegt ook.
- Vergeet niet dat de "ready" functie getoond in de code het scroll gedrag stelt telkens de Web-pagina wordt geladen. Schakel auto scrollen, commentaar uit de code u toegevoegd aan het document van de webpagina.
