Det er mange forskjellige teknologier tilgjengelig for å designe en nettside . En stil element brukt gjennom nettet er bruk av åpenhet , som er kontrollert ved å justere et element dekkevne . En utvikler kan oppnå denne effekt selv om en rekke forskjellige metoder, inkludert bruken av MooTools rammeverket. MooTools
MooTools er en JavaScript- rammeverk . JavaScript er den primære skriptspråk av nettet , det er i stand til å lage komplekse animasjoner eller enkle web funksjonalitet . Målet med MooTools er å skape en forenklet måte for utviklere å bruke JavaScript. Det hevder å redusere mengden av kode en utvikler vil skrive , tillate enklere kryss-nettleser kompatibilitet og gi en lett, pålitelig rammeverk.
Opacity Bruker
Når du justere et element opacity du kontrollere dens generelle åpenhet. Dette kan benyttes i en rekke forskjellige måter, en utvikler kan ønske å redusere et bilde tetthet , øke sin gjennomsiktighet, for å skape en mer passende bakgrunnsbilde. Du kan også justere opacity av et bilde basert på en brukers handlinger , for eksempel hvis en bruker plasserer sin musepekeren over et bilde , kan du redusere bilde tetthet for å markere at det har blitt valgt . Gjennomsiktighet kan også brukes som en stil -element. Gir en rekke opasitet nivåer på en webside kan øke dybden og følelsen av det endelige produktet .
Enkle Opacity Effect
MooTools er designet for å redusere mengden med kode som trengs for å produsere JavaScript- effekter , og du kan endre opacity for ethvert bilde på en webside med bruk av MooTool bibliotek. Ved å opprette en "klasse" og bruke "set "-metoden kan du angi varierende grad av tetthet, som deretter kan brukes ved å identifisere klassen i din HTML image taggen. Et eksempel på MooTools kode er under:
window.addEvent (' domready ' , function () {
$ $ (' opacity . ') Hver ( funksjon ( MyEl ) { < . br >
MyEl.set (' opacity ' , + MyEl.get (' rel ') '.' );
});
});
< p > i eksempelet ovenfor du har opprettet en " opacity " class og indikerte at gjennomsiktigheten av bildet vil endre seg når du justerer bildene " rel " tag. Ved å plassere " window.addEvent (' domready ' , function () {" i koden du instruere funksjonen tittelen " MyEl " for å fyre når HTML- siden lastes . Dette vil sikre at tettheten endringen er gjort så snart den besøkende kommer til webområdet ditt for å gjennomføre opacity endringen legge til følgende linje med HTML -kode: .
src="myImg.jpg" rel="50" class="opacity" />
Substitute " myImg.jpg " med bildefilen . I dette eksempelet " myImg.jpg " har en tetthet på 50 prosent.
opacity Animasjon
< p > en måte å øke åpenhet effekten er å animere det . Bruke MooTools du kan justere opacity av et bilde basert på hvor brukeren kommuniserer med et objekt . mus hendelser er den vanligste typen interaksjon . Ved hjelp MooTools , kan du angi at du ønsker opacity sett på et nivå på " mouseenter " ( når brukeren mus over et objekt ) og et annet nivå på " mouseleave " ( når markøren er fjernet fra objektet ) . Denne typen funksjonen er implementert på en lignende måte til en enkel opacity endring; . . lage en "klasse" og kaller den klassen i HTML-koden funksjonen deretter bruker mus hendelser for å endre bilde tetthet
(funksjon ( $ ) {
< p> window.addEvent (' domready ' , function () {
Var opacity = 0,6 , toOpacity = 0.8 ; .
$ $ (' div.opacity ') set (' opacity ' , opacity ) addEvents ( {
mouseenter : function ( ) {
this.tween (' opacity ' , toOpacity );
} , etter
. denne funksjonen indikerer at vinduet skal endre seg til en opacity nivået " 0,8 " eller 80 prosent når musen går inn i vinduet. som det første eksempelet ( i kapittel 3) , er den første funksjonen satt til å laste når nettleseren åpnes , noe som indikeres av " domready . " The " mouseenter "-funksjonen instruerer et bilde med en klasse med " opacity " for å endre fra « opacity " til " toOpacity . " verdiene for disse variablene er satt til tredje linje med kode. ved å justere disse numrene du vil justere funksjonene opacity nivå når musen går inn eller ut av bildet.
