Magi HTML Klient Kanter - Del 2 Inledning Detta är den andra delen av min serie Magic HTML Klient kanter. Här ser vi hur man ska genomföra Magic HTML klient kanter. I denna del ska vi betrakta fallet där räknaren (inre DIV element) kommer ut ur vänstra kanten på sidan och går tillbaka när det behövs. Typ av härma vänster Edge Vi måste sätta en härma kant intill den vänstra kanten. Vår härma kanten är en DIV element. Så skapar vi en DIV inslag vars höjd är att höjden på klientområdet på skärmen. Bredden är 1px. Elementet ges noll stoppning, noll gränsen och nollmarginal.
Det ges också en CSS z-indexvärde på 2. På detta sätt visas det i framför kroppen, som har en lägre z-indexvärde. Det ges en onMouseOver händelse, som utlöser visningen av inre DIV elementet. Höjd av kanterna Höjden av DIV element för den vänstra kanten ges CSS värdet på 100%. På detta sätt tar den vänstra kanten höjden på klientområdet. Rullning från den vänstra kanten BODY elementet har noll padding och nollmarginal. Motsvarande CSS uttalande för detta är: body {background-color: # ff9933; padding: 0px; margin: 0px} Den härma kantelementet är:
Bakgrundsfärgen är att stomelementet.
Det finns en onMouseOver attribut. När musen är över härma kanten funktionen doShiftRight () kommer att kallas. Funktionerna vi skall se från och med nu hädanefter är modifierade versioner av vad vi såg i den tidigare delen av serien. doShiftRight () är en av dem; Vi ska se detaljerna senare. Funktionen, doShiftRight () kommer att förskjuta inre DIV elementet till höger. Skriptet kommer inte längre att vara i stomelementet, kommer det att vara i huvudelementet. Du kan radera all skriptet du har i BODY inslag i föregående kapitel. Det yttre DIV elementet bör inte ha en gräns.
Radera följande egendom från CSS uttalande av den yttre DIV elementet. kant: 2px solid blue; Ersätt vad du har raderat med: border-width: 0px; De två DIV element (inre och yttre) är nästa element till härma kanten (1px DIV). Se till att fastigheterna i alla CSS uttalande skiljs åt av semikolon. Grundläggande funktion för att bläddra från vänster När muspekaren går över den vänstra kanten, är funktionen doShiftRight () anropas. Funktionen har två tillhörande variabler.
Detta är funktionen med variabler: var x; //x-koordinat var TR; //returvärde för setInterval () funktion - flytta höger funktions doShiftRight () {x = document.getElementById (Calc) style.left. x = parseInt (x); TR = self.setInterval ("shiftRight ()", 10); } Den pixel är det minsta igenkännbara komponenten på webbsidan. Webbsidan är fylld med pixlar ordnade i rader och kolumner. Hela bilden som visas på skärmen är ett resultat av de bildelement med olika färger. Variabeln, x ovan är för en kolumn av bildpunkter i det yttre DIV elementet.
Kom ihåg att det inre DIV elementet passar precis in i den yttre DIV elementet. Så denna variabel är faktiskt används för att ändra den horisontella positionen för den inre DIV. Nästa variabel, är TR för retur ID för setInterval () metoden inuti funktionen ovan. Den första raden i funktionen kopior CSS vänster positionsvärdet för den inre DIV elementet till variabeln, x. Denna vänster värde vid start är -205px. Nästa rad gör att det är ett heltal. Den tredje raden anropar en funktion som kallas, shiftRight () genom DOM: s setInterval () funktionen varje 10ms.
Den shiftRight () Denna funktion förskjuter inner DIV till höger och stannar när CSS lämnade positionen är större än eller lika med noll. Detta är funktionen: function shiftRight () {document.getElementById (Calc) style.left = x;. //sluta rulla rätt if (x>