Der er mange forskellige teknologier til rådighed for at designe en webside. En stil element, der anvendes i hele nettet er brugen af gennemsigtighed, som styres ved at justere et element opacitet . En udvikler kan opnå denne effekt , selvom en række forskellige midler, herunder anvendelsen af MooTools rammer. MooTools
MooTools er en JavaScript rammer. JavaScript er det primære scriptsprog af World Wide Web , det er i stand til at skabe komplekse animationer eller simple web funktionalitet. Målet med MooTools er at skabe en forenklet måde for udviklere at bruge JavaScript. Det hævder at reducere mængden af kode en udvikler vil skrive , gøre det lettere at cross-browser kompatibilitet og giver en let, pålidelig ramme .
Opacity Bruger
Når du justere et element opacitet du styre sin overordnede gennemsigtighed. Dette kan anvendes i en række forskellige måder, en udvikler måske ønsker at reducere et billede opacitet , øge dens gennemsigtighed for at skabe en mere egnet baggrundsbillede . Du kan også justere opaciteten af et billede baseret på en brugers handlinger , for eksempel , hvis en bruger placerer sin markøren over et billede kan du reducere billedets opacitet for at betegne , at det er blevet valgt. Gennemsigtighed kan også bruges som en stil element . Giver en række ugennemsigtige niveauer på en webside kan øge dybden og fornemmelsen af det endelige produkt.
Salg Simple Opacity Effect
MooTools var designet til at reducere mængden af kode for at producere JavaScript effekter , og man kan ændre opacitet for et billede i en webside med brugen af MooTool bibliotek . Ved at oprette en "klasse" og brug af "set" metode, du kan angive forskellige niveauer af opacitet, som derefter kan bruges ved blot at identificere klassen i din HTML billede tag . Et eksempel på MooTools kode er nedenfor : Hej
window.addEvent ( ' domready ', function () {
$ $ (' opacitet .') Hver ( funktion ( MyEl ) { < . br >
MyEl.set ( opacitet ' + MyEl.get ( rel ' ) «. ');
} ),
} )
< p > i ovenstående eksempel , du har skabt et " opacitet " class og oplyste, at gennemsigtigheden af billedet vil ændre sig , når du justerer billederne " rel " tag . Ved at placere " window.addEvent ( ' domready ', function () {" i koden , du instruere den funktion med titlen " MyEl " at fyre , når HTML- siden indlæses . Dette vil sikre, at uigennemsigtighed ændringen sker , så snart den besøgende ankommer til din hjemmeside for at gennemføre opaciteten ændringen tilføje følgende linje HTML-kode : .
< br >
Stedfortræder " myImg.jpg " med dit billede fil. i dette eksempel " myImg.jpg " har en opacitet på 50 procent .
opacity Animation
en måde at øge gennemsigtigheden virkning er at animere det. Brug MooTools du kan justere opaciteten af et billede baseret på, hvordan brugeren interagerer med et objekt. Mouse begivenheder er den mest almindelige form for interaktion. Brug MooTools , kan du angive, at du gerne vil opaciteten indstillede på ét niveau på " mouseenter " ( når brugeren placerer musen over et objekt ) og en anden plan om " mouseleave " ( når markøren er fjernet fra objekt) . Denne type af funktion er implementeret på en lignende måde til en simpel uigennemsigtighed forandringer; . . skabe en "klasse" og kalde denne klasse i din HTML-kode funktionen bruger derefter musebegivenheder for at ændre billedets opacitet
(function ( $ ) {
< p> window.addEvent ( ' domready ', function () {
var opacitet = 0.6 , toOpacity = 0,8 ; .
$ $ (' div.opacity ") sæt ( ' opacitet ' , opacitet) addEvents ( {
mouseenter : function () {
this.tween ( opacitet ' toOpacity ),
} ,
. denne funktion angiver, at vinduet skulle skifte til en opacitet niveau " 0.8" eller 80 procent, når musen føres ind i vinduet. Ligesom det første eksempel ( i afsnit 3) er den oprindelige funktion indstillet til at indlæse , når browseren åbnes , hvilket er angivet med " domready . " The " mouseenter " funktionen instruerer et billede med en klasse af " uigennemsigtighed " for at ændre fra " opacitet " til " toOpacity ". værdierne for disse variabler er fastsat på den tredje linje kode . ved at justere disse numre, du vil justere funktioner opacitet niveau, når musen kommer ind i eller forlader billedet .
