Magic HTML Klient Kanter - Del 4 Indledning Dette er den fjerde og sidste del af min serie, Magic HTML Client kanter. I denne del af serien giver jeg dig den komplette kode af projektet. Vi har også slutte af med at have nogle nyttige kommentarer. Hen mod slutningen af denne del, jeg giver dig (et link til) den fuldstændige kode af projektet i zip-format. Kodeksen og dens Drift jeg vil give dig koden som det findes i zip-filen fra top til bund. Igen vil jeg være kortfattet i forklaringen, da du skulle have set en masse af det i bit.
Vi begynder med de globale variable, der anvendes i mange dele af koden. Disse variabler er: var kant = ""; Var paneBack = true; Var leftPaneShown = false; Var topPaneShown = false; Disse variabler er relateret til nogle af de tekniske krav, vi oplevede i tredje del af serien. Når ruden (indre DIV) er rullet fra venstre kant i siden, er denne kant variabel givet værdien "venstre". Når ruden er rullet fra toppen, ned på siden, er variablen gives værdien, "top".
Når ruden er stadig i kanten eller er gået tilbage ind i kanten, den variable, der paneBack bruges til at angive det med værdien af sand. Nu, når du klikker på kropelementet ruden skal rulle væk (i kanten). Når du klikker på ruden, da ruden er foran BODY elementet, BODY indirekte modtager et klik. Du ønsker ikke ruden for at rulle tilbage, når kroppen ikke er klikket direkte. De næste to variabler ovenfor anvendes til dette. Den første (leftPaneShown) er til ruden fra den venstre kant. Den anden (topPaneShown) er til ruden fra den øverste kant.
Kode til Shift højre og venstre Her taler jeg om den kode der er ansvarlig for at vise den ydre DIV og skiftende den indre DIV til højre og til venstre. Jeg taler også om kodesegmentet der fjerner ruden fra siden. De variabler, der bruges af dette afsnit er: var x; Var TR; Var TL; Var processOnL = false; Variablen, x er x-koordinat for pixel. Den variable, TR er den returnerede id fra setInterval () funktion, når flytte ruden til højre. Den variable, TL er den returnerede ID setInterval () funktion, når flytte ruden til venstre.
I processen med at flytte ruden til højre eller venstre, kan retningen ikke vendes, indtil bevægelsen er afsluttet. Variablen, der processOnL anvendes til dette. Det er oprindeligt indstillet til false; standardværdien er falsk. Den doShiftRight () Funktion doShiftRight () funktion forbereder siden for at skifte ruden til højre. Dette er 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 af ruden document.getElementById ("Cont) style.top =" 25% ". //vise den ydre DIV document.getElementById ("Cont) style.display =" blok ". TR = self.setInterval ("shiftRight ()", 10); }} Udsagnene inde i doShiftRight () funktion kun udføres, når ruden (indre DIV element) ikke er i bevægelse, og når det er inde i venstre kant (eller er gået tilbage i kanten). Prøven i hvis-betingelse tager sig af dette. Den første sætning i hvis-blokken sætter variablen, processOnL til sand, hvilket betyder, at ruden er i bevægelse eller er til at begynde at bevæge sig.
Den næste sætning sætter variablen, paneBack til falsk, hvilket betyder, at ruden er ikke længere i kanten. Husk, at i projektet, CSS stil attribut har top og venstre værdier for den ydre DIV som 0px. Så når den webside er netop åbnet, den ydre DIV s placering er på siden til venstre-top-klient-området. Dens display ejendom på det tidspunkt er "ingen", så det er ikke set, og ikke optager plads; det har ingen effekt på de elementer, der ville være bag det. Den næste sætning i funktionen giver den indre DIV en venstre værdi -205px. Dette forskyder den indvendige DIV i mimic kant.
Det vil blive flyttet derfra. Dette er for konsistens for at sørge for, at de skiftende starter fra den rigtige position. Den næste sætning sætter toppen af den ydre DIV element og dens indhold 25% fjernt ned klientområdet. Den indre DIV vil blive forskudt horisontalt i den ydre DIV element i denne position. Enhver position du giver til den ydre DIV, den indre DIV tager såvel ved, at det er inden for den ydre DIV. Værdien til stillingen ejendom af den indre DIV er "relativt".
Med dette, ved at ændre værdierne for venstre og top egenskaber af den indre DIV, du flytter det inden for den ydre DIV. Den næste sætning viser den ydre DIV. Efter vores kode, når den ydre DIV vises, den indre DIV vises også. Den sidste sætning i funktionen er bekendt (fra de tidligere dele af serien). Den shiftRight () funktion Dette er funktionen; det er bekendt. Jeg vil kun forklare de tilføjede udsagn. funktion shiftRight () {document.getElementById ("Calc") style.left = x.
; //stoppe rulningen højre, hvis (x>
net