Magi HTML Klient Kanter - Del 4 Inledning Detta är den fjärde och sista delen av min serie Magic HTML Klient kanter. I denna del av serien jag ger dig en komplett koden för projektet. Vi avslutar också genom att ha några användbara kommentarer. Mot slutet av denna del, jag ger dig (en länk till) den fullständiga koden för projektet i zip-format. Koden och dess drift skall jag ge er koden som finns i zip-filen från topp till botten. Återigen Jag ska fatta mig kort i förklaringen eftersom du skulle ha sett en hel del av det i bitar.
Vi börjar med de globala variabler som används i många delar av koden. Dessa variabler är: var kant = ""; var paneBack = true; var leftPaneShown = false; var topPaneShown = false; Dessa variabler är kopplade till några av de tekniska krav som vi såg i den tredje delen av serien. När rutan (inre DIV) har rullat från den vänstra kanten i sidan, är denna kant variabeln ges värdet "vänster". När panelen har rullat från toppen, ner i sidan, är variabeln ges värdet, "toppen".
När panelen fortfarande är i kanten eller har gått tillbaka in i kanten, variabeln är paneBack används för att indikera det med värdet true. Nu, när du klickar på BODY elementet rutan ska rulla iväg (i kanten). När du klickar på rutan, eftersom rutan är framför BODY elementet, kroppen får indirekt klick. Du vill inte rutan för att rulla tillbaka när kroppen inte klickas direkt. De nästa två variablerna ovan används för detta. Den första (leftPaneShown) är för rutan från vänsterkanten. Den andra (topPaneShown) är för rutan från den övre kanten.
Kod för att Skift Höger och Vänster Här talar jag om koden är ansvarig för att visa den yttre DIV och flytta inner DIV till höger och till vänster. Jag talar också om kodsegmentet som tar bort rutan från sidan. De variabler som används i detta avsnitt är: var x; var TR; var TL; var processOnL = false; Variabeln, x betecknar x-koordinaten för pixeln. Den rörliga, är TR den returnerade ID från setInterval () funktion vid växling rutan till höger. Variabeln är TL den returnerade ID för setInterval () funktion vid växling rutan till vänster.
I processen att skifta rutan till höger eller vänster, kan riktningen inte vändas tills rörelsen är komplett. Variabeln är processOnL används för detta. Det är inledningsvis inställd på false; standardvärdet är false. Den doShiftRight () Funktion doShiftRight () funktionen förbereder sidan för att flytta rutan till höger. Detta är funktionen: function doShiftRight () {if ((processOnL == false) && (paneBack == true)) {processOnL = true; paneBack = false; . document.getElementById ("Calc ') style.left =" -205px "; . X = document.getElementById ('Calc') style.
left; x = parseInt (x); //toppen av rutan document.getElementById (forts) style.top = "25%". //visa yttre DIV document.getElementById (forts) style.display = "block". TR = self.setInterval ("shiftRight ()", 10); }} Uttalandena inuti doShiftRight () funktion är endast utförs när rutan (inre DIV element) är inte i rörelse och när det är inne i vänstra kanten (eller har gått tillbaka i kanten). Testet i if-villkor tar hand om detta. Den första uttalande i if-blocket anger variabeln, processOnL till true, vilket innebär att panelen är i rörelse eller är att börja röra sig.
Nästa uttalande sätter variabeln, paneBack till false, vilket innebär att rutan är inte längre i kanten. Kom ihåg att i projektet, har CSS-formatattribut topp och vänster värden för yttre DIV som 0px. Så när webbsidan just öppnat, är den yttre DIV placering på sidan till vänster-top klientområdet. Dess display fastigheten vid den tidpunkten är "ingen", så det är inte sett, och inte upptar utrymme; det har ingen effekt på de element som skulle vara bakom den. Nästa uttalande i funktionen ger inre DIV ett vänster värde -205px. Detta förskjuter inre DIV i härma kanten.
Det kommer att skiftas därifrån. Detta är för konsistens för att vara säker på att växlingen börjar från rätt position. Nästa uttalande sätter upp ytter DIV elementet och allt dess innehåll 25% avlägsen ner klienten området. Inner DIV kommer att förskjutas horisontellt inuti det yttre DIV elementet vid denna position. Alla positioner du ger till den yttre DIV tar inre DIV samt av det faktum att det är inne i ytter DIV. Värdet för egenskapen position på den inre DIV är "relativt".
Med detta, genom att ändra värdena på de vänstra och övre egenskaperna hos den inre DIV, flytta dig det inom den yttre DIV. Nästa uttalande visar ytter DIV. Efter vår kod, när den yttre DIV visas den inre DIV visas också. Den sista uttalandet i funktionen känner (från de tidigare delarna i serien). Den shiftRight () Funktion Detta är funktionen; Det är bekant. Jag kommer bara att förklara tillsatta uttalanden. funktion shiftRight () {document.getElementById ('Calc') style.left = x.
; //sluta rulla rätt if (x>