Opacity Efekty v MooTools

Existuje mnoho rôznych technológií sú k dispozícii pre navrhovanie webové stránky . Jeden štýl prvok použitý na celom webe je použitie transparentnosti , ktorý je riadený nastavením krytie prvku je . Autor môže dosiahnuť tohto efektu však rad rôznych prostriedkov , vrátane použitia rámca MooTools . MooTools

MooTools je rámec , JavaScript . JavaScript je primárny skriptovací jazyk na webe , je schopný vytvárať zložité animácie alebo jednoduché webové funkcie . Cieľom MooTools je vytvoriť zjednodušený spôsob , ako vývojári používať JavaScript . Tvrdí , že zníženie množstva kódu , developer bude písať , umožní jednoduchšie kompatibilitu s rôznymi prehliadačmi a poskytuje ľahkú , spoľahlivý rámec .
Opacity Používa

Keď nastaviť priehľadnosť elementu je môžete ovládať svoju celkovú transparentnosť . Toto môže byť použité v mnohých rôznymi spôsobmi , autor môže chcieť znížiť krytie obraz je , zvýšenie jeho transparentnosti , s cieľom vytvoriť vhodnejšie obrázok na pozadí sa . Môžete tiež nastaviť priehľadnosť obrazu na základe akcie užívateľa , napríklad , ak používateľ umiestni svoj ​​kurzor nad obrázok , môžete znížiť krytie na obrazu tak , aby znamenať , že bol vybraný . Transparentnosť môže byť tiež použitý ako prvok štýlu . Poskytuje rôzne úrovne opacity na webovej stránke môže zvýšiť hĺbku a pocit z konečného produktu .
Jednoduché Opacity Effect

MooTools bol navrhnutý tak , aby zníženie množstvo kódu potrebné k výrobe efektov JavaScript , a môžete zmeniť priehľadnosť pre každý obrázok na webovej stránke s využitím knižnice MooTool je . Vytvorením " triedu " a metódou " SET " , môžete uviesť rôzne úrovne opacity , ktoré potom môžu byť používané len označenie triedy vo Vašom HTML image značky . Príklad MooTools kód je nasledujúci :

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

$ $ ( ' nepriehľadnosť . " ) Každý ( function ( myelo ) { < . br >

MyEl.set ( " opacity " , + MyEl.get ( " rel " ) " . ' ) ;

} ) ;

} ) ;

Vo vyššie uvedenom príklade ste vytvorili " krytie " triedu , a uviedol , že transparentnosť obrazu sa zmení , keď sa upraviť obrázky " rel " tag . Tým , že " window.addEvent ( " domready ' , function ( ) { " v kóde , ktorý nariaďuje funkciu s názvom " myelo " k streľbe , keď sa HTML stránka načíta . Tým bude zabezpečené , že zmena opacity je , akonáhle návštevník príde na svoje webové stránky Za účelom vykonania zmeny opacity pridajte nasledujúci riadok kódu HTML : .

src = " myImg.jpg " rel = " 50 " class = " opacity " />

Substitute " myImg.jpg " s vašou image súboru . v tomto príklade " myImg.jpg " má krytie vo výške 50 percent .
Opacity Animácie

Jeden spôsob , ako zvýšiť efekt priehľadnosti , je to oživiť . Pomocou Mootools môžete nastaviť priehľadnosť obrazu podľa toho, ako používateľ pracuje s objektom . udalosti myši sú najčastejším typom interakcie . Pomocou Mootools , môžete uviesť , že by ste chceli priehľadnosť nastavená na jednej úrovni na tému " MouseEnter " ( keď používateľ myši nad objektom ) a ďalšiu úroveň na " mouseLeave " (ak je kurzor odstrániť z objektu ) . Tento typ funkcia sa vykonáva podobným spôsobom na jednoduchú zmenou nepriehľadnosti . vytvoriť " triedu " a volať , že triedy v HTML kóde funkcie potom používa udalosti myši , aby bolo možné zmeniť nepriehľadnosť obrazu

( function ( $ ) {
< . p > window.addEvent ( " domready ' , function ( ) { var

opacity = 0,6 , toOpacity = 0,8 ; .

$ $ ( ' div.opacity " ) set ( " opacity " . , nepriehľadnosť ) addEvents ( {

MouseEnter : function ( ) {

this.tween ( " opacity " , toOpacity ) ;

} ,

Táto funkcia znamená , že okno by sa malo zmeniť na úroveň nejasnosti " 0,8 " alebo 80 percent , ak kurzor myši vstúpi okno . Ako prvý príklad ( v kapitole 3 ) , počiatočná funkcia nastavená na načítanie , akonáhle sa otvorí okno prehliadača , ktoré je indikované " domready . " Funkcia " MouseEnter " inštruuje ľubovoľný obrázok s triedou " opacity " k zmene z " opacity " na " toOpacity . " Hodnoty týchto premenných sú nastavené na treťom riadku kódu . Úprava týchto čísla sa nastaviť úroveň funkcie krytia , ak kurzor myši vstúpi alebo opustí obraz .

• Predchádzajúca strana: Ako udržať JS Prototype Až do dneška 
• Ďalšia strana: Ako aktualizovať Session premenné