MooTools
is een JavaScript- raamwerk . JavaScript is de primaire scripttaal van het web , het in staat is om complexe animaties of eenvoudige web functionaliteit. Het doel van MooTools is een vereenvoudigde manier voor ontwikkelaars om JavaScript te gebruiken maken . Het claimt de hoeveelheid code een ontwikkelaar zal schrijven verlagen , zodat voor eenvoudiger cross- browser compatibiliteit en zorgen voor een lichtgewicht , betrouwbaar kader .
Dekking Gebruikt

Wanneer u ondoorzichtigheid van een element u de algehele transparantie controle aan te passen . Dit kan gebruikt worden in een verscheidenheid van verschillende manieren , een ontwikkelaar kan willen een beeld van de dekking te verlagen , verhogen van de transparantie, met het oog op afbeelding een meer geschikte achtergrond te maken . U kunt ook de dekking van een beeld op basis van acties van de gebruiker aan te passen , bijvoorbeeld als een gebruiker zijn cursor plaatst over een afbeelding , kunt u de afbeelding van de dekking te verminderen om aan te geven dat het is geselecteerd . Transparantie kan ook worden gebruikt als een stijlelement . Het verstrekken van een verscheidenheid van ondoorzichtigheid niveaus op een webpagina kan de diepte verbeteren en het gevoel van het eindproduct .
Eenvoudige Dekking Effect

MooTools
werd ontworpen om te verminderen de hoeveelheid code die nodig is om JavaScript effecten te produceren , en u kunt de dekking voor elke afbeelding in een webpagina met het gebruik van de bibliotheek van het MooTool 's te veranderen . Door het creëren van een "klasse" en met de " set " -methode kunt u aangeven verschillende niveaus van dekking , die vervolgens kunnen worden gebruikt door simpelweg het identificeren van de klas binnen uw HTML- image -tag . Een voorbeeld van de MooTools code is hieronder:

window.addEvent
( ' domready ' , function ( ) {

$ $ ( ' ondoorzichtigheid . " ) Elk ( function ( MYEL ) { < . br

MyEl.set > ( ' ondoorzichtigheid ' , + MyEl.get ( ' rel ' ) ' . ' ) ;

} ) ;

} ) ;

In het bovenstaande voorbeeld heb je een " ondoorzichtigheid " class gemaakt en aangegeven dat de transparantie van de afbeelding zal veranderen wanneer u de beelden " rel " tag aan te passen . Door het plaatsen van " window.addEvent ( ' domready ' , function ( ) { " in de code die u instrueren van de functie met de titel " MYEL " te vuren wanneer de HTML- pagina wordt geladen . Zal dit ervoor zorgen dat de dekking veranderen zodra de bezoeker wordt gemaakt binnenkomt op uw website ter uitvoering van de dekking veranderen voeg je de volgende regel HTML- code : .

< br

plaatsvervanger > " myImg.jpg " met uw beeldbestand . In dit voorbeeld is " myImg.jpg " heeft een dekking van 50 procent .
dekking Animatie

een manier om de transparantie-effect te versterken is om het te animeren . gebruik MooTools kunt u de dekking van een beeld op basis van hoe de gebruiker interageert met een object aan te passen . Mouse events zijn de meest voorkomende vorm van interactie . gebruik MooTools , kunt u aangeven dat u wilt de ondoorzichtigheid op een niveau " MouseEnter " ( wanneer de gebruiker de muis over een object ) en het niveau van " mouseLeave " ( wanneer de cursor wordt verwijderd uit het object) . Dit type wordt gerealiseerd op soortgelijke wijze een eenvoudige dekking verandering ; . . creëren van een "klasse" en noem die klasse in uw HTML-code de functie gebruikt dan de muis evenementen om het imago van de dekking veranderen

( function ( $ ) {

window.addEvent ( ' domready ' , function ( ) { var

ondoorzichtigheid
= 0.6 , toOpacity = 0.8 ; .

$ $ ( ' div.opacity ' ) set
( ' ondoorzichtigheid ' , ondoorzichtigheid ) addEvents ( {

MouseEnter
: function ( ) {

this.tween
( ' ondoorzichtigheid ' , toOpacity ) ;

} ,

. deze functie geeft aan dat het venster moet veranderen in een ondoorzichtigheid niveau van " 0.8" of 80 procent wanneer de muis het venster . Net als het eerste voorbeeld ( in hoofdstuk 3 ) , wordt de eerste functie op te laden zodra het browservenster wordt geopend , waarin wordt aangeduid met " domready . " de functie " MouseEnter " instrueert een afbeelding met een klasse van " ondoorzichtigheid " te veranderen van " ondoorzichtigheid " naar " toOpacity . " de waarden voor deze variabelen worden ingesteld op de derde regel code . door het instellen van deze nummers vindt u de functies dekking aan te passen wanneer de muis binnenkomt of verlaat de afbeelding .