Magisk HTML Client Edges - Del 4 Innledning Dette er den fjerde og siste del av serien min, magi HTML Client Edges. I denne delen av serien gir jeg deg den komplette koden til prosjektet. Vi har også konkludere ved å ha noen nyttige kommentarer. Mot slutten av denne delen, gir jeg deg (en link til) hele koden av prosjektet i zip-format. Koden og dens Operation jeg vil gi deg koden som det er funnet i zip-filen fra topp til bunn. Igjen vil jeg være kort i forklaringen, siden du skulle ha sett mye av det i biter.
Vi begynner med den globale variabler som brukes i mange deler av koden. Disse variablene er: var edge = ""; Var paneBack = true; Var leftPaneShown = false; Var topPaneShown = false; Disse variablene er relatert til noen av de tekniske kravene som vi så i tredje del av serien. Når panelet (indre DIV) har rullet fra venstre kant inn på siden, er denne kanten variabel gitt verdien "venstre". Når panelet har rullet fra toppen, ned i siden, variabelen gitt verdien, "topp".
Når panelet er fortsatt i kanten eller har gått tilbake inn i kanten, det variable, blir brukt til å indikere paneBack så med verdien av sann. Nå, når du klikker BODY-elementet panelet bør rulle unna (i kanten). Når du klikker i ruten, siden panelet er foran BODY element, indirekte mottar BODY et klikk. Du ønsker ikke panelet til å bla tilbake når kroppen ikke klikkes direkte. De neste to variablene ovenfor er brukt for dette. Den første (leftPaneShown) er for panelet fra venstre kant. Den andre (topPaneShown) er for ruten fra den øverste kanten.
Kode til Shift Høyre og Venstre Her snakker jeg om koden ansvarlig for å vise den ytre DIV og skiftende indre DIV til høyre og til venstre. Jeg snakker også om kodesegmentet som fjerner ruten fra siden. Variablene som brukes av denne seksjonen er: var x; Var TR; Var TL; Var processOnL = false; Den variable representerer x x-koordinaten til bildeelementet. Variabelen, er TR den returnerte ID fra setInterval () -funksjonen når skiftende ruten til høyre. Variabelen, er TL den returnerte ID setInterval () -funksjonen når skiftende ruten til venstre.
I prosessen med å flytte vinduet til høyre eller venstre, kan retningen ikke oppheves før bevegelsen er fullført. Den variable, blir processOnL brukes til dette. Det er i utgangspunktet satt til false; standardverdien er falsk. Den doShiftRight () Funksjon doShiftRight () -funksjonen forbereder siden for å skifte ruten til høyre. Dette er funksjonen: 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 panelet document.getElementById ('Cont') style.top = "25%."; //vise ytre DIV document.getElementById ('Cont') style.display = "block."; TR = self.setInterval ("shiftRight ()", 10); }} Uttalelsene inne i doShiftRight () -funksjonen er kun utføres når panelet (indre DIV element) ikke er i bevegelse, og når det er på innsiden av venstre kant (eller har gått tilbake i kanten). Testen i if-tilstanden tar seg av dette. Den første setningen i if-blokken setter variabelen, processOnL til sann, noe som betyr at panelet er i bevegelse eller er å begynne å bevege seg.
Den neste setningen setter variabelen, paneBack til falsk, noe som betyr at panelet er ikke lenger i kanten. Husk at i prosjektet, har CSS stil attributtet øvre og venstre verdier for ytre DIV som 0px. Så når nettsiden er nettopp åpnet, er den ytre DIV plassering på siden til venstre på toppen av klientområdet. Displayet eiendom på den tiden er "ingen", så det er ikke sett, og opptar ikke plass; det har ingen effekt på de elementene som ville være bak det. Den neste setningen i funksjonen gir indre DIV en venstre verdi av -205px. Dette fortrenger den indre DIV inn i etterligne kanten.
Det vil bli flyttet derfra. Dette er for konsistens å sørge for at skiftende starter fra riktig posisjon. Den neste setningen setter toppen av det ytre DIV element og alt dens innhold 25% fjernt nedover klientområdet. Den indre DIV vil bli forskjøvet horisontalt inne i den ytre DIV element i denne posisjon. Hvilken som helst posisjon du gi til den ytre DIV, tar den indre DIV også ved det faktum at det er inne i den ytre DIV. Verdien for stillingen tilhører den indre DIV er "slektning".
Med dette, ved å endre verdiene av de venstre og topp egenskaper av den indre DIV, flytter du det innenfor den ytre DIV. Den neste setningen viser ytre DIV. Etter vår kode, når det ytre DIV vises, den indre DIV vises også. Den siste setningen i funksjonen er kjent (fra de tidligere deler av serien). Den shiftRight () -funksjonen Dette er funksjonen; det er kjent. Jeg vil bare forklare lagt uttalelser. funksjon shiftRight () {document.getElementById ('Calc') style.left = x.
; //stoppe rull riktig if (x>