Magisk HTML Client Edges - Del 2 Innledning Dette er den andre delen av min serie, magi HTML Client Edges. Her ser vi hvordan vi skal gjennomføre klient Edges magi HTML. I denne delen skal vi vurdere saken, hvor kalkulatoren (indre DIV element) kommer ut av den venstre kanten på siden og går tilbake når det er nødvendig. Nature av ligne venstre kant Vi må sette en etterligner kant like ved venstre kant. Vår ligne kanten er en DIV element. Så lage en DIV element hvis høyde er at høyden av klienten området på skjermen. Bredden er 1px.
Elementet er gitt null padding, border og null null margin. Det er også gitt en CSS z-indeksverdi på 2. På denne måten, synes det foran kroppen, som har en lavere z-indeksverdi. Det er gitt en onmouseover arrangementet, som utløser rulling av det indre DIV element. Høyden av kantene Høyden på DIV element for den venstre kant er gitt CSS-verdi på 100%. På denne måten tar den venstre kanten høyden på klientområdet. Rulle fra venstre kant body-elementet har null polstring og null margin.
Den tilsvarende CSS uttalelse til dette er: body {background-color: # ff9933; padding: 0px; margin: 0px} Den etterligner kanten element er:
Bakgrunnsfargen er at av BODY-elementet. Det er en onmouseover attributt. Når musen er over ligne kanten funksjonen, doShiftRight () vil bli kalt. Funksjonene vi skal se fra nå heretter blir modifisert versjon av hva vi så i forrige del av serien. doShiftRight () er en av dem; vi skal se detaljene senere. Funksjonen, doShiftRight () vil forskyve den indre DIV element til høyre.
Skriptet vil ikke lenger være i kroppen element, vil det være i hodeelementet. Du kan slette alle manuset du har i kroppen element i forrige kapittel. Den ytre DIV element bør ikke ha en grense. Slett følgende eiendommen fra CSS uttalelse av den ytre DIV element. border: 2px solid blå; Erstatte det du har slettet med: border-width: 0px; De to DIV elementer (indre og ytre) er de neste elementene til ligne kanten (1px DIV). Sørg for eiendommene i noen CSS uttalelse skilles med semikolon.
Grunnleggende funksjon for Rulle fra venstre når musepekeren går over den venstre kanten, er funksjonen, doShiftRight () kalles. Funksjonen har to tilhørende variabler. Dette er funksjonen med variablene: var x; //x koordinere Var TR; //returverdi for setInterval () -funksjonen - flytting riktig funksjon doShiftRight () {x = document.getElementById ('Calc') style.left.; x = parseInt (x); TR = self.setInterval ("shiftRight ()", 10); } Den piksel er den minste gjenkjennelig komponenten på nettsiden. Nettsiden er fylt med piksler ordnet i rader og kolonner.
Hele bildet du ser på skjermen er som et resultat av pikslene som har forskjellige farger. Den variable, x ovenfor er for en kolonne av bildeelementer i det ytre DIV element. Husk at den indre DIV element passer akkurat inn i den ytre DIV element. Så denne variabelen faktisk brukes til å endre den horisontale posisjonen til den indre DIV. Den neste variabel, er TR for retur ID for setInterval () metoden inne funksjonen ovenfor. Den første linjen i funksjonen, kopier CSS venstre posisjon verdi av det indre DIV element til den variable, x. Dette venstre verdi ved begynnelsen er -205px.
Den neste linjen gjør at det er et heltall. Den tredje linjen kaller en funksjon kalt, shiftRight () gjennom DOM er setInterval () -funksjonen hvert 10ms. Den shiftRight () Funksjon Denne funksjonen flytter indre DIV til høyre og stopper når CSS venstre posisjon er større enn eller lik null. Dette er funksjonen: function shiftRight () {document.getElementById ('Calc') style.left = x;. //stoppe rull riktig if (x>