Magic HTML Client Edges - Deel 2 Inleiding Dit is het tweede deel van mijn reeks, Magic HTML Client randen. Hier zien we hoe de Magic HTML Client Edges implementeren. In dit deel zullen we het geval, waar de rekenmachine (binnenste DIV-element) komt uit de linkerkant van de pagina en gaat terug wanneer nodig te overwegen. Aard van de mimische Left Edge We moeten een mimic rand net naast de linkerrand te zetten. Onze mimic rand is een DIV-element. Zo creëren we een DIV-element waarvan de hoogte is dat de hoogte van de klant gebied van het scherm. De breedte is 1px.
Het element wordt gegeven nul opvulling, nul grens en nul marge. Tevens wordt een CSS z-index van 2. Zo blijkt voor de BODY, die een lagere z-indexwaarde heeft. Het wordt gegeven een onmouseover evenement, dat het scrollen van het binnenste DIV element triggers. Hoogte van de randen De hoogte van de DIV element van de linkerrand krijgt de CSS waarde van 100%. Op deze manier wordt de linkerrand neemt de hoogte van de klant gebied. Scrollen van de linkerrand Het BODY element heeft nul opvulling en nul marge.
De overeenkomstige CSS verklaring hiervoor is: body {background-color: # ff9933; padding: 0px; margin: 0px} De mimische rand element is:
De achtergrondkleur is die van het lichaam element. Er is een onmouseover attribuut. Wanneer de muis zich over de mimische de rand van de functie, doShiftRight () zal worden genoemd. De functies die we zullen zien van nu voortaan zijn aangepaste versies van wat we zagen in het vorige deel van de serie. doShiftRight () is één van hen; wij zullen de gegevens later te zien. De functie, doShiftRight () zal de binnenste DIV element naar rechts verschuiven.
Het script zal niet langer in het BODY element, zal het in het HEAD element. U kunt alle scripts die u in het BODY element in het vorige hoofdstuk te wissen. De buitenste DIV element mag geen grens. Wis de volgende eigenschap van de CSS-verklaring van de buitenste DIV element. grens: 2px stevige blauwe; Vervang wat je hebt gewist met: border-width: 0px; De twee DIV elementen (binnenste en buitenste) zijn de volgende elementen aan de rand nabootsen (1px DIV). Zorg ervoor dat de woningen in een CSS-verklaring worden gescheiden door een puntkomma.
Basic Functie voor het scrollen van links Als de muisaanwijzer gaat over de linkerkant, is de functie, doShiftRight () genoemd. De functie heeft twee bijbehorende variabelen. Dit is de functie met de variabelen: var x; //x-coördinaat var TR; //return waarde voor setInterval () functie - naar rechts te verplaatsen functie doShiftRight () {x = document.getElementById ('Calc') style.left.; x = parseInt (x); TR = self.setInterval ("shiftRight ()", 10); } De pixel is de kleinste herkenbare component op de webpagina. De webpagina is gevuld met pixels gerangschikt in rijen en kolommen.
De volledige afbeelding die u ziet op het scherm is als gevolg van de pixels met verschillende kleuren. De variabele x is hierboven voor een kolom van pixels in het buitenste DIV element. Vergeet niet dat de binnenste DIV element net past in de buitenste DIV element. Dus deze variabele daadwerkelijk voor de horizontale positie van de binnenste DIV wijzigen. De volgende variabele, TR is voor de terugkeer-ID voor de methode setInterval () binnen de functie hierboven. De eerste regel in de functie, kopieën CSS linkse positie waarde van de binnenste DIV element toe aan de variabele, x.
Deze links waarde bij de start is -205px. De volgende regel zorgt ervoor dat het een integer. De derde regel noemt een functie genaamd, shiftRight () door de DOM's setInterval () functie iedere 10ms. The shiftRight () Deze functie verschuift de binnenste DIV naar rechts en stopt wanneer het CSS linkerpositie is groter dan of gelijk aan nul. Dit is de functie: functie shiftRight () {document.getElementById ('Calc') style.left = x;. //stoppen scrollen recht if (x>