• hjem
  •  > 
  • Multimedier
  •  > 
  • Hvordan jeg oprettede open source One Page Scroll plugin. Sådan finder du ud af rulleretningen på musehjulet

Hvordan jeg oprettede open source One Page Scroll plugin. Sådan finder du ud af rulleretningen på musehjulet

Hvordan hænger dagens trick sammen med vores side? Ved første øjekast ingenting. Men hvis du er på din Mac i afsnittet Boot Camp Windows lever, så har du sikkert allerede bemærket, at Microsoft ikke planlagde og ikke har til hensigt at ændre retningen for rulning af musen og pegefeltet. På grund af dette viser det sig, at i Mac OS X vil indholdet i vinduerne følge din fingers bevægelse (dvs. omvendt scrolling), og i Windows vil du flytte skyderen på skærmen, og selve indholdet vil flytte i anden retning.

Generelt, hvis du ikke kan skifte fra én tilgang til at styre musen til en anden, er det tid til at tage afgørende handling. Der er to måder (mulighed med afinstallere Windows og dens overførsel til virtuel maskine vi vil ikke overveje):

  • deaktiver tilbagerullning i Lion eller Bjergløve . Dette gøres i systemindstillingerne, i henholdsvis "Mus" og "Trackpad" fjernbetjeningerne.
  • aktiver omvendt scrolling i Windows. Mærkeligt nok er der en parameter for dette i systemregistret, men at finde ud af, at det er et separat eventyr

Da vi ikke leder efter nemme måder, vil vi i dag tale om det andet alternativ - aktivering af omvendt rulning i Windows.

Først skal du komme ind, for eksempel kan dette gøres gennem kontrolpanelet. I administratoren skal du se sektionen "Mus og andre pegeredskaber":

Vælg din mus fra listen over enheder Dobbeltklik. Gå til fanen "Detaljer", i rullelisten skal du bruge punktet "Udstyrs-id":

Vær opmærksom på den første linje, startende med bogstaverne VID (for eksempel VID_203A&PID_FFFC&REV_0100&MI_01). Husk denne kombination.

Tryk på Command+R på dit tastatur, skriv regedit i det vindue, der åbnes, og tryk på Enter. Editoren åbnes Windows registreringsdatabasen. Vælg en gren til venstre HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\HID. Du vil se en liste over mus og pegefelter mærket med VID-, PID- og MI-kombinationer. Du skal genkende den enhed, du konfigurerer her:

Inde i enheden kan du finde flere mapper. I hver af dem skal du gå ind i mappen Device Parameters og ændre parameterværdien FlipFlophjul fra 0 til 1. Efter genstart vil omvendt rulning fungere i Windows.

  • Oversættelse

Rulleeffekter har eksisteret på nettet i lang tid, og selvom der allerede er mange plugins at vælge imellem, har kun et lille antal af dem den lette vægt og enkelhed, som mange designere og udviklere kræver. De fleste plugins, jeg har set, forsøger at gøre for meget, hvilket gør dem svære at inkludere i dine projekter.

For kort tid siden introducerede Apple iPhone 5S og et præsentationssite, hvor siden var opdelt i sektioner, og hver sektion beskrev en af ​​produktets funktioner. Jeg troede, at dette var en fantastisk måde at præsentere produktet på uden at gå glip af nøgleoplysninger.

Jeg ledte efter et passende plugin, og til min overraskelse fandt jeg ikke et. Dette er, hvordan siderullende plugin blev født.

Plugin til siderulning.

Et jQuery-baseret plugin, der giver dig mulighed for at oprette et layout til en side med flere sektioner ved hjælp af minimal markup.

Jeg vil fortælle dig, hvordan det blev skabt, fra koncept, til planlægning, test og frigivelse af gratis kode.

Bemærk: Inden jeg byggede pluginnet, var jeg allerede klar over debatten om, hvorvidt scripts skulle ændre browserens naturlige rulleadfærd - dette kan være forvirrende for brugerne. Så jeg prøvede at reducere negativ effekt fra at ændre vanemæssig adfærd. I plugin-indstillingerne kan du indstille skærmstørrelser, hvor plugin'et vender tilbage til normal skærmrullning. På enheder med lavt strømforbrug, såsom smartphones og tablets, kan du således opretholde webstedets ydeevne. Derudover kan du indstille varigheden af ​​animationen, når du skifter mellem sektioner.

Hvad er alt dette til for?

Som jeg allerede har nævnt, de fleste færdige plugins inkluderet mange valgfrie funktioner, hvilket gør integration vanskelig. Dette plugin skal være:

Let at bruge
- let at integrere
- kræver minimal markup
- udføre en funktion, men godt

1. Tegninger

Jeg begyndte at planlægge plugin'et fra generelt til specifikt. Det skal rulle efter afsnit. For at gøre dette skal du deaktivere normal rulning i browseren, mens du betjener sektioner efter hinanden, og om nødvendigt fremme siden.

Du kan forestille dig alt i dit sind, eller du kan lave skitser.

Del konceptet op i små opgaver, og løs hver enkelt sekventielt.

1. Forbered sektionernes layout
Lad os deaktivere normal rulning ved at anvende overløb: skjult til kroppen. Vi vil arrangere sektionerne i den nødvendige rækkefølge, beregne og tilpasse nødvendige oplysninger og klasser.

2. Indstil en manuel rulleudløser
Vi fanger udløseren ved hjælp af jQuery, bestemmer rulleretningen og flytter layoutet ved hjælp af CSS.

3. Lad os tilføje funktioner
Lad os tilføje lydhørhed, looping, understøttelse af rulning på touchskærme, paginering osv.

4. Lad os tjekke forskellige browsere ind.
Lad os tjekke Chrome-browsere, Safari, Firefox, Internet Explorer 10 og mest populære Windows-operativsystemer, Mac OS X, iOS og Android 4.0+.

5. Lad os gøre plugin'et tilgængeligt i depotet
Lad os oprette et lager og skrive instruktioner til brug af pluginnet

6. Lad os udvide supporten.
Lad os undersøge andre måder at øge plugin-understøttelsen på.

2. Opbygning af fundamentet

Efter at have designet plugin'et gik jeg i gang med at bygge fundamentet på denne skabelon:

Function($) ( var defaults = ( sectionContainer: "section", ... ); $.fn.onepage_scroll = function(options) ( var settings = $.extend((), defaults, options); ... ) )($)

Vi starter skabelonen med modulet!function($) ( ... )($), som placerer den globale jQuery-variabel i et lokalt omfang - dette vil hjælpe med at reducere belastningen og forhindre konflikter med andre biblioteker.

Standardvariablen indeholder standardindstillinger.

$.fn.onepage_scroll er hovedfunktionen, der initialiserer alt. Hvis du laver dit eget plugin, så glem ikke at skrive et andet navn i stedet for onepage_scroll.

Du kan forhindre standardrullning ved at tildele den til body-tagget overløbsejendom: skjult
via et plugin-specifikt klassenavn. Vigtigt at bruge unikke navne stilarter for at undgå konflikt med eksisterende. Jeg bruger normalt en forkortelse af navnet på plugin'et og derefter en bindestreg adskilt af navnet på stilen, for eksempel: .onepage-wrapper.

Grunden er lagt, lad os gå videre til den første funktion.

3. Forbered layoutet og arranger sektionerne

Først gik jeg den forkerte vej. Jeg tænkte, at jeg ville sætte alle sektionerne i rækkefølge og gennemgå dem i en løkke. Hvad jeg fik først:

Var sektioner = $(settings.sectionContainer); var topPos = 0; $.each(sections, function(i) ( $(this).css((position: "absolut", top: topPos + "%" )).addClass("ops-section").attr("data-index ", i+1); topPos = topPos + 100; ));

Sløjfen itererer gennem alle vælgere (sectionContainer er defineret i standardvariablesektionen), tildeler position: absolut og tildeler hver næste sektion den korrekte topposition, så de ikke løber over hinanden.

Toppositionen gemmes i topPos. Vi starter fra bunden og tilføjer med hver cyklus. For at få hver sektion til at fylde hele siden, sætter jeg deres højde til 100% og tilføjer 100 til topPos.

Udvikling og test tog mig et par timer, men ved næste trin indså jeg, at alt dette ikke var nødvendigt.

4. Manuel trigger og sidekonvertering

Du skulle tro, at det næste skridt ville være at flytte hver sektion til en ny position, når rulleudløseren udløses... Men der er en bedre måde. I stedet for at flytte hver af sektionerne i en løkke, lægger jeg bare dem alle i en beholder og bruger CSS3 translate3d-funktionen til at flytte den. Denne funktion understøtter procenter, vi kan flytte sektioner, så de er præcist placeret i vinduet uden at skulle genberegne alt igen. Det gør det også nemmere at styre hastigheden og andre animationsparametre.


Den første løsning er ikke altid den mest effektive, så husk at give tid til eksperimenter.

Nu er der kun tilbage at bestemme rulleretningen og flytte beholderen i den ønskede retning.

Funktion init_scroll(event, delta) ( var deltaOfInterest = delta, timeNow = new Date().getTime(), quietPeriod = 500; // Annuller rulning, hvis aktuelt animerer eller inden for en stille periode if(timeNow - lastAnimation< quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow; } $(document).bind("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); });

Først kobler vi funktionen til mousewheel-hændelsen (DOMMouseScroll i Firefox), så kan vi opsnappe dataene og bestemme retningen. Vi integrerer det i init_scroll-behandlingen, som modtager wheelData for dette.

I en ideel verden ville det være nok at beregne ændringen i hjuldata. Når du animerer sekvenser, skal du dog indbygge en check for at sikre, at triggerhændelsen ikke duplikeres (ellers vil billedet overlappe under animationen). Du kan bruge setInterval til at kalde hver animation efter tur, men dette giver ikke nøjagtighed og pålidelighed, fordi hver browser håndterer det forskelligt. For eksempel i Chrome og Firefox sænker setInterval farten i inaktive faner, som et resultat af, at funktioner ikke udføres til tiden. Som et resultat, besluttede jeg at bruge en funktion, der returnerer den aktuelle tid.

Var timeNow = new Date().getTime(), quietPeriod = 500; … if(tidNu - sidste animation< quietPeriod + settings.animationTime) { event.preventDefault(); return; } … lastAnimation = timeNow;

I dette uddrag, som jeg citerede fra den forrige kode, gemmer jeg den aktuelle tid i timeNow, så jeg senere kan kontrollere, om animationen tog mere end 500ms. Hvis den ikke er optaget, sker transformationen ikke, og animationen overlapper ikke. At arbejde med nuværende tid mere pålidelig, fordi det er det samme for alle.

If(deltaOfInterest< 0) { el.moveDown() } else { el.moveUp() }

Funktionerne moveUp og moveDown ændrer layoutattributterne for at afspejle Nuværende tilstand websted. Hver af dem kalder i slutningen af ​​arbejdet den endelige transformationsmetode for at flytte det næste afsnit ind i viewporten.

$.fn.transformPage = function(indstillinger, pos, indeks) ( … $(this).css(( "-webkit-transform": (settings.direction == "horisontal") ? "translate3d(" + pos + " %, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "alle " + settings.animationTime + "ms " + settings.easing, "-moz -transform": (settings.direction == "horisontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-moz -transition": "alle " + settings.animationTime + "ms " + settings.easing, "-ms-transform": (settings.direction == "horisontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "-ms-transition": "alle " + settings.animationTime + "ms " + settings.easing, "transform": (indstillinger. retning == "horisontal") ? "translate3d(" + pos + "%, 0, 0)" : "translate3d(0, " + pos + "%, 0)", "transition": "alle " + indstillinger. animationTime + "ms" + settings.easing ));

Dette er en transformationsmetode, der skifter sektioner. Jeg lavede dem i Javascript i stedet for at specificere separate stilarter, så udviklere ville have mulighed for at ændre indstillinger i selve plugin'et (hovedsageligt animationshastighed og acceleration), og ikke skulle rode i stilfilen på udkig efter indstillinger. Derudover skal transformationsprocenten stadig genberegnes, så du kan ikke undvære JavaScript.

5. Yderligere funktioner

Først ville jeg ikke tilføje noget, men jeg modtog så meget feedback fra GitHub-fællesskabet, at jeg besluttede mig for gradvist at forbedre pluginnet. Jeg udgav version 1.2.1, som tilføjer en masse tilbagekald og loops, og den sværeste del er lydhørhed.

Jeg lavede i første omgang ikke pluginnet med mobile platforme i tankerne (hvilket jeg fortryder). I stedet var vi nødt til at spore og genberegne berøringsskærmhændelser til en form, der var egnet til brug i init_scroll. Dette fungerer ikke godt i alle browsere, så vi var nødt til at indbygge en rollback-funktion, hvor browseren vender tilbage til normal rulning, når en bestemt vinduesbredde er nået.

Var defaults = (responsiveFallback: falsk ... ); function responsive() ( if ($(window).width()< settings.responsiveFallback) { $("body").addClass("disabled-onepage-scroll"); $(document).unbind("mousewheel DOMMouseScroll"); el.swipeEvents().unbind("swipeDown swipeUp"); } else { if($("body").hasClass("disabled-onepage-scroll")) { $("body").removeClass("disabled-onepage-scroll"); $("html, body, .wrapper").animate({ scrollTop: 0 }, "fast"); } el.swipeEvents().bind("swipeDown", function(event) { if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveUp(); }).bind("swipeUp", function(event){ if (!$("body").hasClass("disabled-onepage-scroll")) event.preventDefault(); el.moveDown(); }); $(document).bind("mousewheel DOMMouseScroll", function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); } }

Lad os definere en standardvariabel. Vi bruger responsiveFallback til at bestemme, hvornår plugin'et skal rulle tilbage. Denne kode bestemmer bredden af ​​browseren. Hvis bredden er mindre end værdien fra responsiveFallback, fjerner funktionen alle hændelser, flytter siden til begyndelsen og tillader den at rulle som normalt. Hvis bredden overstiger værdien, tjekker plugin'et for tilstedeværelsen af ​​klassen disabled-onepage-scroll for at se, om den er initialiseret. Hvis ikke, initialiseres den igen.

Løsningen er ikke perfekt, men den giver udviklere og designere mulighed for at vælge, hvordan deres side skal vises på mobil platform, snarere end at afvise disse platforme helt.

6. Test i forskellige browsere.

Test er en vigtig del af udviklingen, før du frigiver et plugin, skal du sikre dig, at det virker på de fleste maskiner. Jeg udvikler altid i Chrome – for det første kan jeg godt lide dets udviklerværktøjer, og for det andet ved jeg, at hvis et plugin virker i Chrome, vil det højst sandsynligt fungere i Safari og Opera.

Jeg plejer at bruge Macbook Air til udvikling, og derhjemme har jeg en pc til test. Efter plugin'et virker i Chrome, tester jeg det manuelt i Safari, Opera og endelig Firefox på Mac OS X og derefter Chrome, Firefox og Internet Explorer 10 på Windows.

Det er ikke alt mulige browsere, men det gode ved open source er, at andre udviklere selv vil være i stand til at teste og rette fejl - det er dens pointe. Du behøver ikke lave det perfekte produkt med det samme, men sæt et springbræt til starten.

Glem ikke at teste dine plugins imod mobile enheder.

For at gøre test nemmere, efter at have afsluttet plugin'et, opretter jeg en demoside for at vise alle dens muligheder og uploade den til mit websted. Der er fejl, som ikke kan fanges lokalt, men som dukker op, når man arbejder på en rigtig side. Når demosiden kører, begynder jeg at teste på mobile enheder.

7. Upload plugin'et til open source

Det sidste trin er at dele pluginnet på GitHub. For at gøre dette skal du oprette en konto der, konfigurere Git og oprette et nyt lager. Klon det derefter til din lokale maskine - dette vil oprette en mappe med navnet på plugin'et. Vi kopierer pluginnet dertil og sætter strukturen op.

Depotstruktur

Tilpas det som du ønsker. Jeg gør dette:

Demobiblioteket indeholder fungerende demoer med alle de nødvendige ressourcer
- de almindelige og komprimerede versioner af plugin er i roden
- CSS og testressourcer, såsom billeder (hvis nødvendigt) er i roden
- readme-fil grundlæggende

Readme struktur

En vigtig fase er at skrive klare instruktioner for open source-fællesskabet. Jeg plejer at skrive dem i readme, men for komplekse sager en wiki-side kan være nødvendig. Sådan skriver jeg readme:

1. Introduktion
Jeg forklarer formålet med plugin, giver et billede og et link til demoen.
2. Krav og kompatibilitet.
Det er bedre at flytte denne sektion højere, så det med det samme er klart, om en person kan bruge pluginnet.
3. Grundlæggende brugsprincipper
Trin-for-trin instruktioner, fra at forbinde jQuery til HTML-markering og kalde en funktion. Indstillingerne er også beskrevet.
4. Avanceret brug.
Mere komplekse instruktioner - offentlige metoder, tilbagekald og anden nyttig information.
5. Andre ressourcer
Links til vejledningen, tak osv.

8 Udvidelse af support

Generelt ville det være muligt at undvære jQuery, men jeg havde travlt med at gøre det til open source, så jeg besluttede at reducere udviklingstiden og stole på færdige funktioner i jQuery.

Men for at rense min samvittighed omarbejdede jeg plugin'et i ren JavaScript (en version med Zepto-understøttelse er også tilgængelig). Med ren JS er der ingen grund til at inkludere jQuery, alt fungerer ud af boksen.

For at rette op på det, og udelukkende for Smashing Magazines læsere, har jeg genopbygget One Siderul ved at bruge ren JavaScript (en Zepto-version er også tilgængelig). Med den rene JavaScript-version behøver du ikke længere at inkludere jQuery. Pluginnet fungerer lige ud af boksen.

Ren JS og Zepto version

Omarbejder plugin til ren JavaScript

Sådan behandling kan virke som en vanskelig opgave, men dette er kun i første omgang. Det sværeste er ikke at lave fejl med matematik. Fordi Jeg har allerede gjort dette, det tog mig kun et par timer at udvikle hjælpefunktionerne for at slippe af med jQuery.

Pluginnet er baseret på CSS3, så vi skulle bare erstatte jQuery-kaldene med vores egne lignende. Samtidig omorganiserede jeg scriptets struktur:

Standardvariable værdier
Alt er det samme som i tidligere version
- initialiseringsfunktion
Forbereder og arrangerer layout og initialisering af, hvad der sker, når onePageScroll-funktionen kaldes. Det er her alle de procedurer, der tildeler klassenavne, attributter og positioneringsstile, sidder.
- private metoder
Alle interne metoder plugin - rullehændelser, sidetransformation, adaptiv rollback og rullesporing.
- offentlige metoder
Alle metoder for udviklere: moveDown(), moveUp() og moveTo()
- hjælpermetoder
Alt, der tilsidesætter jQuery-kald.

Der var et par ubehagelige øjeblikke - en separat funktion blot for at tilføje eller fjerne et stilnavn, eller brugen af ​​document.querySelector i stedet for $. Men i sidste ende fik vi et bedre struktureret plugin.

Genopbygning af plugin til Zepto

Jeg besluttede at støtte Zepto, på trods af at det kun er beregnet til de fleste moderne browsere(IE10+), fordi det virker hurtigere og mere effektivt end jQuery 2.0+, samtidig med at det har en mere fleksibel API. Zpeto er 4 gange mindre end jQuery, hvilket påvirker sideindlæsningshastigheden. Med folk, der bruger smartphones oftere, fremstår Zepto som et bedre alternativ.

Det er nemmere at konvertere et plugin fra jQuery til Zepto, fordi de har lignende API'er. Næsten alt er det samme, bortset fra animationsdelen. Fordi Zeptos $.fn.animate() funktion har CSS3 animation support og support ring tilbage animationEnd, næste del:

$(this).css(( "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "-webkit-transform " + settings.animationTime + " ms " + settings.easing, "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transition": "-moz-transform " + settings.animationTime + "ms " + settings.easing, "-ms-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transition": "-ms-transform " + settings.animationTime + "ms " + settings.easing, "transform": "translate3d(0, " + pos + "%, 0)", "transition": "transform " + settings.animationTime + "ms " + settings.easing )); $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(e) (if (typeof settings.afterMove == "function") settings.afterMove(index, next_el); ));

Kan erstattes med denne kode:

$(this).animate(( translate3d: "0, " + pos + "%, 0" ), settings.animationTime, settings.easing, function() (if (typeopsætning.afterMove == "funktion") indstillinger. afterMove(indeks, næste_el )); )

Zepto giver dig mulighed for at lave animationer uden at definere alle stilarter eller selv tildele tilbagekald.

Og hvorfor bøvle med dette?

Fordi alting flere folk bruge jQuery, bliver det mere og mere komplekst og nogle gange langsommere. Hvis du understøtter andre rammer, bliver dit plugin mere populært.
Redesign fra begyndelsen vil også hjælpe dig med at lave bedre plugins i fremtiden. jQuery og andre biblioteker er tilgivende mindre fejl, såsom manglende kommaer - som følge heraf er du ligeglad med kvaliteten af ​​dit arbejde. Uden disse nydelsesmidler i ren JavaScript havde jeg en bedre fornemmelse for, hvordan mit plugin fungerer – hvad der virker, hvad der påvirker ydeevnen, og hvad der kan forbedres.

Selvom biblioteker som jQuery har gjort vores liv lettere, er det ikke det bedste at bruge dem effektiv metode at nå målet. Nogle plugins kan gøre dette.

Konklusion.

Nå, her er hele processen med at oprette One Page Scroll-pluginnet. Der var fejl, men jeg lærte af dem, efterhånden som udviklingen skred frem. Hvis jeg udviklede det i dag, ville jeg fokusere på mobile enheder og tilføje flere kommentarer til koden.

Uden støtte fra fællesskaber som GitHub, StackOverflow og Smashing Magazine, ville jeg ikke have været i stand til at lave pluginnet så hurtigt. Disse fællesskaber hjalp mig meget i mit arbejde, og derfor gør jeg mine plugins gratis tilgængelige for alle. Dette er min måde at betale den vidunderlige støtte tilbage på.

I denne korte artikel vil jeg vise en måde at bestemme retningen for rulning af musehjulet. Anvendelsesområdet er måske ikke så omfattende, men jeg er selv stødt på mere end én gang, hvor det var nødvendigt. For eksempel at skabe én "parallakseeffekt", hvor siden i det væsentlige ikke behøvede at rulle, og effekten kun opstod baseret på, om brugeren drejede musehjulet og i hvilken retning. Det er muligt, at du finder anvendelse i dine projekter, hvis ikke nu, så i fremtiden.

Funktion addEvent(elem, type, handler)( if(elem.addEventListener)( elem.addEventListener(type, handler, false); ) else ( elem.attachEvent("on"+type, handler); ) return false; ) funktion scrollDirection())( var weelEvt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel", el = document.body; addEvent(el, weelEvt, function(e)( var evt = e .originalEvent ? e.originalEvent: e, delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta console.log("Rul " + (delta > 0 ? "op" : "ned")) ; )); // For jQuery - kald bare funktionen efter DOM er indlæst /*$(function())( scrollDirection(); ));*/

Jeg kan ikke se meningen med at beskrive noget særligt. Det eneste du lige kan notere dig selv er, at i I dette tilfælde FireFox "udmærkede sig" med sin ikke-standard begivenhed "DOMMouseScroll".
For bedre forståelse og perception besluttede jeg at lave et eksempel, hvor vi påtager os følgende opgave: med hver brugerrulle skulle han tydeligt komme til næste/forrige afsnit af siden uden at springe det over, selvom han scrollede intensivt. Samtidig vil vi indlæse det tilsvarende indhold i den aktuelle blok. Lad os bygge følgende HTML og CSS:

* ( margin: 0; polstring: 0; ) #grid li ( liste-stil: ingen; højde: 300px; border-bottom: 1px prikket #333; ) #fake (højde: 5000px;) /* lige til der var helt sikkert en rullebjælke */

Lad os gå videre til JS. Her er vores opgave at annullere den sædvanlige adfærd under musescroll-begivenheden ( i det væsentlige - forhindre brugeren i at rulle siden manuelt), beregne, afhængigt af hjulets bevægelsesretning, den næste eller forrige blok, rul animeret til denne blok og indlæs det nødvendige indhold i den.

$(function())( var flag = falsk, // nødvendig for at forhindre handlinger under animation bn = 0, // indeks for de aktuelle blokblokke = $("#grid li"), // alle blokke cnt = blokke. længde, // antal blokke mousewheelevt = (/Firefox/i.test(navigator.userAgent)) "DOMMouseScroll" : "mousewheel" // wheel scroll event blocks.eq(0).load("loadblocks. html #); b0"); // indlæs straks indholdet i den første blok // funktion til at bestemme retningen for at rulle hjulet funktionen getDelta(e)( var evt = e || window.event; evt = evt.originalEvent ? evt.originalEvent : evt; return delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta;) // catch the scroll event $(dokument). preventDefault(); / / annullere den sædvanlige adfærd (siden ruller ikke) if(flag) returnerer false // if flag == true, then in dette øjeblik animation forekommer if(getDelta(e) > 0)( if(bn<= 0) return false; // если дошли до первого блока, то отменяем yderligere tiltag--bn; // hvis blokken ikke er den første, så beregn indekset for den forrige blok) else ( if(bn >= cnt-1) return false; // hvis vi nåede den sidste blok, så annuller yderligere handlinger ++bn; // hvis blokken ikke er den sidste, så beregner vi indekset for den næste blok) flag = sand; // sæt et flag, der angiver, at animationen er startet $("html, body").finish().animate(( scrollTop: blocks.eq(bn).offset().top // rul siden til den beregnede blok efter indeks), 1000, function())( blocks.eq(bn).load("loadblocks.html #b" + bn); // indlæs indhold for blokflaget = falsk; // fjern flaget, hvilket indikerer at animationen er færdig )); )); ));

Jeg beskrev alt i kommentarerne, men det er tilbage at forklare, hvor dataene er indlæst fra. I metode belastning(), er det muligt ikke kun at angive det dokument, der skal indlæses, men også at bestemme hvilket element vi skal bruge. I eksemplet brugte jeg et almindeligt html-dokument med flere elementer ( i henhold til antallet af vores blokke) har ID'er fra "b0" til "b6". Efter at have modtaget indekset for den aktuelle blok, indlæser vi elementet med det tilsvarende id.

Prøv, eksperimenter, og vigtigst af alt husk, at nogle ting, som du måske ikke har brug for i dag, kan være meget nyttige i morgen. Og hvis du har nogle usædvanlige spørgsmål eller opgaver, så skriv dem i dette emne eller i afsnittet "