Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
  • * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Opacitet Effekter i MooTools

    Det finns många olika tekniker som finns för att utforma en webbsida . En stil element som används över hela webben är användningen av öppenhet , som styrs genom att justera ett elements opacitet . En utvecklare kan uppnå denna effekt även om en mängd olika sätt, inklusive användningen av MooTools ramverket. MooTools

    MooTools är ett JavaScript ramverk . JavaScript är det primära skriptspråk för webben , det kan skapa komplexa animeringar eller enkel Web funktionalitet . Målet med MooTools är att skapa ett förenklat sätt för utvecklare att använda JavaScript . Det hävdar att minska mängden kod en utvecklare kommer att skriva , möjliggöra enklare kompatibilitet med olika webbläsare och ger en lätt , tillförlitlig ram . Addera Opacitet Använder

    När du justera ett elements opacitet du styra dess övergripande insyn . Detta kan användas i en mängd olika sätt, en utvecklare kan vilja förminska en bild opacitet , vilket ökar dess öppenhet, detta för att skapa en mer lämplig bakgrundsbild. Du kan också justera opaciteten för en bild som bygger på användarens åtgärder , till exempel om en användare placerar sin markören över en bild , kan du minska bildens opacitet för att beteckna att den har valts . Öppenhet kan också användas som en stil inslag . Att ge en mängd opacitetsnivåer på en webbsida kan öka djupet och känslan av den slutliga produkten .
    Simple Opacitet Effect

    MooTools var utformad för att minska den mängd kod som behövs för att producera JavaScript effekter , och du kan ändra opaciteten för varje bild i en webbsida med hjälp av MooTool bibliotek . Genom att skapa en " klass " och använda " set " metoden kan du ange olika nivåer av opacitet , som sedan kan användas genom att helt enkelt identifiera klassen i din HTML bildtagg . Ett exempel på MooTools koden nedan :

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

    $ $ ( ' opacitet . " ) Vardera ( function ( LFöPL ) { < . br >

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

    } ) ;

    } ) ;

    i exemplet ovan har du skapat en " opacitet " klass och visade att insynen i bilden ändras när du justerar bilderna " rel " -taggen . Genom att placera " window.addEvent ( ' domready ' , function ( ) { " i koden du instruerar funktionen med titeln " LFöPL " att skjuta när HTML sidan laddas . Detta kommer att säkerställa att opaciteten ändringen görs så snart besökaren anländer till din webbplats för att genomföra opacitet förändringen lägga till följande rad med HTML -kod : .


    Substitute " myImg.jpg " med din bildfil . i det här exemplet " myImg.jpg " har en opacitet på 50 procent . Addera opacitet Animation

    ett sätt att öka öppenheten effekten är att animera det . Använda MooTools du kan justera opaciteten för en bild som bygger på hur användaren interagerar med ett objekt . Mushändelser är den vanligaste typen av interaktion . Använda MooTools , kan du ange att du vill opaciteten inställd på en nivå på " mouseenter " ( när användaren för muspekaren över ett objekt ) och en annan nivå på " mouseLeave " ( när markören tas bort från objektet ) . Denna typ av funktion är implementerad på ett liknande sätt till en enkel opacitet förändring, . . skapa en " klass " och kalla den klassen i HTML-koden funktionen använder sedan musen händelser för att ändra bildens opacitet

    ( function ( $ ) {

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

    var opacitet = 0,6 , toOpacity = 0,8; .

    $ $ ( ' div.opacity ' ) set ( " opacitet " , opacitet ) addEvents ( {

    mouseenter : function ( ) {

    this.tween ( " opacitet " , toOpacity ) ;

    } ,

    . denna funktion anger att fönstret ska byta till en opacitet nivå " 0,8 " eller 80 procent när musen går in i fönstret . Liksom det första exemplet ( i avsnitt 3 ) , är den ursprungliga funktionen inställd på att läsa när webbläsarfönster öppnas , vilket indikeras av " domready . " The " mouseenter " funktionen instruerar en bild med en klass av " opacitet " för att ändra från " opacitet " till " toOpacity . " värdena för dessa variabler är inställda på den tredje raden i koden . genom att justera dessa siffror du kommer att justera funktioner opacitetsnivå när musen går in eller ut bilden .

    Tidigare:

    nästa:
    relaterade artiklar
    ·Hur man tar bort en Space Från en variabel i Javascrip…
    ·Inaktivera JavaScript när du använder Selen
    ·Hur fyller en ComboBox med JavaScript
    ·Hur du ändrar teckensnitt färger med javascript
    ·Hur man skapar en animerad 3D Logo i Javascript
    ·Hur man läser ett objekt i jQuery
    ·Hur att tolka en Query String i Javascript
    ·Hur du uppdaterar Litteralt JavaScript
    ·Varför är Script saktar datorn ner
    ·Hur beräkna summor beställningsformuläret på JavaSc…
    Utvalda artiklarna
    ·Hur Rita trianglar i Java
    ·Hur man använder PHP med en termisk skrivare
    ·Hur Graph med programvara för Python
    ·Hur man använda magi Multi Anslutningar
    ·Hur får input från en Java GUI
    ·Hur man ange värdet för en specifik post i Access Vis…
    ·Så här öppnar FlexGrid i VB6
    ·Hur man startar och rensa en session i PHP
    ·Hur till Öppen & Convert FLL Dokument
    ·Felsökning av en Android Eclipse AVD
    Copyright © Dator Kunskap http://www.dator.xyz