Magic HTML Klient Kanter - Del 2 Indledning Dette er den anden del af min serie, Magic HTML Client kanter. Her ser vi, hvordan man gennemfører de Magic HTML Client kanter. I denne del, skal vi behandle sagen, hvor lommeregneren (indre DIV element) kommer ud af den venstre kant af siden og går når det er påkrævet. Arten af den mimic venstre kant Vi er nødt til at sætte en mimic kant lige ved siden af den venstre kant. Vores mimic kant er en DIV element. Så vi skabe en DIV element hvis højde er, at højden af kundens område af skærmen. Bredden er 1px.
Elementet er givet nul polstring, nul grænse og nul margin. Det er også givet en CSS z-indeksværdi på 2. På denne måde forekommer det foran kroppen, som har en lavere z-indeksværdi. Det gives en onmouseover begivenhed, som udløser rulning af den indre DIV element. Højde af kanterne Højden af DIV element for venstre kant gives CSS værdi på 100%. På denne måde den venstre kant tager højde klientområdet. Rulning fra venstre kant kropelementet har nul polstring og nul margin.
Den tilsvarende CSS opgørelse for dette er: body {background-color: # ff9933; padding: 0px; margin: 0px} Den efterligner kant element er:
Baggrundsfarven er den for BODY elementet. Der er en onmouseover attribut. Når musen er over efterligne kant funktionen, doShiftRight () blive kaldt. Funktionerne, vi skal se fra nu fremover er modificerede versioner af hvad vi så i den foregående del af serien. doShiftRight () er en af dem; vi skal se detaljerne senere. Funktionen, doShiftRight () vil forskyde den indvendige DIV element til højre.
Scriptet vil ikke længere være i BODY elementet, vil det være i HEAD element. Du kan slette alle scriptet du har i kroppen element i det foregående kapitel. Den ydre DIV element bør ikke have en kant. Slet følgende egenskab fra CSS opgørelse af den ydre DIV element. kant: 2px solid blå; Erstatte, hvad du har slettet med: border-width: 0px; De to DIV elementer (indre og ydre) er de næste elementer til mimic kant (1px DIV). Sørg for, at ejendomme i enhver CSS erklæring er adskilt af semikolon.
Grundlæggende til at rulle fra venstre, når musemarkøren går over den venstre kant, er funktionen, doShiftRight () kaldes. Funktionen har to tilknyttede variabler. Dette er funktionen med variablerne: var x; //x-koordinat var TR; //returværdi for setInterval () funktion - at bevæge højre funktion doShiftRight () {x = document.getElementById ("Calc") style.left.; x = parseInt (x); TR = self.setInterval ("shiftRight ()", 10); } Den pixel er den mindste genkendelige komponent på websiden. Websiden er fyldt med pixels arrangeret i rækker og kolonner.
Hele billedet vises på skærmen, er som følge af de pixels, der har forskellige farver. Den variable, x herover er for en søjle af pixels inden i det ydre element DIV. Husk, at det indvendige DIV element lige passer ind i den ydre DIV element. Så denne variabel faktisk anvendes til at ændre den vandrette placering af den indre DIV. Den næste variabel, TR er til returnering ID for setInterval () metode inde i ovenstående funktion. Den første linje i funktionen, kopier CSS venstre position værdien af det indre DIV element til variablen x. Denne venstre værdi i starten er -205px.
Den næste linie gør sikker på det er et heltal. Den tredje linje kalder en funktion kaldes, shiftRight () gennem DOM s setInterval () funktion hver 10ms. Den shiftRight () funktion Denne funktion forskyder indre DIV til højre og stopper, når CSS venstre position er større end eller lig med nul. Dette er funktionen: function shiftRight () {document.getElementById ("Calc") style.left = x;. //stoppe rulningen højre, hvis (x>