Magic HTML Client Edges - Deel 4 Inleiding Dit is het vierde en laatste deel van mijn reeks, Magic HTML Client randen. In dit deel van de serie geef ik u de volledige code van het project. We concluderen ook door het hebben van een aantal nuttige opmerkingen. Tegen het einde van dit deel, geef ik u (een link naar) de volledige code van het project in zip-formaat. De code en de werking ervan zal ik u de code geven als het wordt gevonden in het zip-bestand van boven naar beneden. Wederom zal ik kort in de verklaring zijn, omdat je gezien moet hebben er veel van in bits.
We beginnen met de globale variabelen die worden gebruikt in vele delen van de code. Deze variabelen zijn: var rand = ""; var paneBack = true; var leftPaneShown = false; var topPaneShown = false; Deze variabelen zijn gerelateerd aan bepaalde technische eisen we in het derde deel van de reeks. Wanneer de ruit (binnenste DIV) heeft geschoven van de linkerrand in de pagina, wordt deze rand variabele gezien de waarde "links". Wanneer het paneel is verschoven van boven naar beneden in de pagina, de variabele krijgt de waarde "top".
Wanneer het paneel nog in de rand of is terug in de rand, de variabele gegaan, paneBack altijd zo geven de waarde true. Nu, wanneer u op de BODY element van de ruit moet weg (in de rand) te scrollen. Wanneer u op de ruit, omdat het paneel is in de voorkant van het BODY element, de BODY indirect ontvangt een klik. Je wilt niet het paneel terug te schuiven wanneer het lichaam niet direct wordt geklikt. De volgende twee variabelen hierboven gebruikt. De eerste (leftPaneShown) is voor de ruit van de linkerrand. De tweede (topPaneShown) voor het paneel van de bovenrand.
Code verschuiving rechter en linker hier praat ik de code verantwoordelijk voor het weergeven van de buitenste DIV en verschuiven van de binnenste DIV naar rechts en naar links. Ik ook praten over de code-segment dat de ruit van de pagina verwijderd. De variabelen die door deze sectie zijn: var x; var TR; var TL; var processOnL = false; De variabele x de x-coördinaat van de pixel. De variabele TR is teruggekeerd ID van setInterval () functie bij het verschuiven van de ruit naar rechts.
De variabele TL is de geretourneerde ID van setInterval () functie bij het verschuiven van de ruit naar links. In het proces van het verschuiven van de ruit naar rechts of links, kan de richting niet ongedaan totdat de beweging is voltooid. De variabele processOnL wordt gebruikt. Het is in eerste instantie ingesteld op false; de standaardwaarde is false. De doShiftRight () Functie De doShiftRight () functie bereidt de pagina om de ruit naar rechts te verschuiven. Dit is de functie: functie 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); //top van de ruit document.getElementById ('vervolg') style.top = "25%".; //weergeven van de buitenste DIV document.getElementById ('vervolg') style.display = "blok". TR = self.setInterval ("shiftRight ()", 10); }} De verklaringen in de doShiftRight () functie worden alleen uitgevoerd wanneer de ruit (binnenste DIV-element) niet in beweging is en wanneer het in de linkerrand (of is teruggegaan naar de rand). De test in de if-voorwaarde zorgt hiervoor.
Het eerste statement in de if-blok zet de variabele, processOnL op true, wat betekent dat de ruit in beweging is of is om te beginnen te bewegen. De volgende verklaring stelt de variabele, paneBack op false, wat betekent dat de ruit niet langer in de rand. Vergeet niet dat in het project, het attribuut CSS-stijl heeft de hoogste en verliet waarden voor de buitenste DIV als 0px. Dus toen de webpagina gewoon wordt geopend, de plaatsing van de buitenste DIV is op de pagina op de linker-top client gebied.
Het display pand op dat moment is "geen", dus het wordt niet gezien, en heeft geen ruimte innemen; het heeft geen effect op de elementen die daarachter zijn. De volgende statement in de functie geeft de binnenste DIV een linker waarde van -205px. Dit verdringt de binnenste DIV in de mimische rand. Het zal worden verplaatst vanaf daar. Dit consistentie te zorgen dat de verschuiving begint vanaf de juiste positie. De volgende verklaring legt de bovenkant van de buitenste DIV-element en alle inhoud van 25% ver beneden de klant gebied.
De binnenste DIV worden horizontaal verplaatst binnen het buitenste DIV element op die positie. Elke positie u de buitenste DIV, de binnenste DIV neemt ook het feit dat het binnen de buitenste DIV. De waarde voor de eigenschap position van de binnenste DIV is 'relatief'. Hiermee door de waarden van de linkerzijde en boven eigenschappen van de binnenste DIV, je verplaatsen binnen de buitenste DIV. De volgende verklaring geeft de buitenste DIV. Naar aanleiding van onze code, wanneer de buitenste DIV wordt weergegeven, de binnenste DIV wordt ook weergegeven.
De laatste verklaring in de functie bekend is (uit de vorige delen van de serie). De shiftRight () Functie Dit is de functie; het is bekend. Ik zal alleen uitleggen de toegevoegde verklaringen. functie shiftRight () {document.getElementById ('Calc') style.left = x.; //stoppen scrollen recht if (x>
6