Mootools Fx Slide Opzioni

30 giorni di MooTools.30 giorni di MooTools è una raccolta di tutorial per imparare ad usare il MooTools javascrit biblioteca, pubblicato la prima volta nel 2008 da lezioni ConsiderOpen. The sono in realtà 23, perché dove interrotto dopo questo day. As il sito originale è attualmente offline, i tutorial sono stati raccolti utilizzando la Wayback Machine per metterle a disposizione di chiunque sia interessato a imparare a usare tutorial MooTools. The si basano su MooTools 1 2 così alcune parti potrebbero essere obsolete e dovrebbero essere aggiornate e ampliate in base alle nuove MooTools versions. The diritto d'autore e la gratitudine per gli insegnamenti originali è tenuto da ConsiderOpen. Displaying elementi with. Welcome al giorno 23 su 30 giorni di Mootools 1 2 tutorial Se si rifugio t già, assicuratevi di controllare il resto della nostra serie MooTools Continuando con i nostri tutorial su i plugin Fx, ci accingiamo a dare un'occhiata a Questo plugin consente di visualizzare i contenuti di scorrere in vista e 'molto semplice da usare e fa una grande aggiunta alla vostra interfaccia utente toolkit. Like tutte le altre classi che abbiamo guardato a, la prima cosa che dovete fare è avviare una nuova istanza della classe e applicarlo a un element. First, consente di impostare il nostro HTML per la diapositiva element. And nostro css doesn t bisogno di essere qualsiasi cosa fancy. Finally, abbiamo avviare una nuova istanza di e passare il nostro elemento variable. Since è un'estensione di Fx, è possibile utilizzare una qualsiasi delle opzioni FX e gli eventi, ma viene fornito con una serie di opzioni itself. There sono solo due opzioni, modalità e involucro Francamente, non ho mai trovato me stesso con involucro non ho mai incontrato il bisogno, ma la modalità è ciò che determina se si desidera far scorrere orizzontalmente o vertically. Mode ti dà due scelte, verticale o orizzontale verticale rivela dall'alto verso il basso e orizzontale rivela da sinistra a a destra ci sono opzioni per andare dal basso verso l'alto o da destra a sinistra, tho ho capito che l'hacking della classe stessa per ottenere questo risultato è relativamente semplice, a mio avviso, si s un'opzione mi piacerebbe vedere di serie, e se qualcuno ha hacked la classe per consentire questa opzione, mandaci un default note. By, getta un wrapper per il vostro elemento scorrevole, dando troppo pieno nascosto wrapper consente di impostare un altro elemento come l'involucro come ho detto sopra, non mi è chiaro da dove questo sarebbe venuto in aiuto e sarebbe interessato ad ascoltare qualsiasi pensieri grazie a horseweapon a per avermi aiutato a chiarire la situazione. dispone anche di molti metodi per mostrare e nascondere i tuoi element. As suggerisce il nome, questo metodo fuoco l'evento di avvio e rivelare i tuoi element. Slides vostro elemento nuovo ai state. This nascosti sarà o far scorrere l'elemento dentro o fuori, a seconda della sua stato attuale metodo molto utile per aggiungere cliccare events. This nasconderà l'elemento senza una diapositiva effect. This mostrerà l'elemento senza una modalità presentazione effect. override con methods. Each dei metodi di cui sopra anche in modalità accettare come un parametro opzionale, lasciando si ignora nulla impostare nelle opzioni. shortcuts. The classe fornisce anche alcune scorciatoie utili per aggiungere l'effetto di un element. Instead di avvio di una nuova classe, è possibile creare una nuova istanza se si imposta su un vetrino element. setting options. You può anche impostare le opzioni con la scorciatoia. una volta che la diapositiva è che si può iniziare con il method. slide sarà accept. each corrispondenti ai metodi above. That copre praticamente le basi l'esempio seguente utilizza la maggior parte di ciò che abbiamo imparato in precedenza, consente di visualizzare una serie di vari tipi di diapositive, e fornisce alcuni div indicatore in modo da poter guardare il events. First, istituito il html. Now, il nostro CSS possiamo mantenere abbastanza simple. Finally, i nostri MooTools javascript. Here è alcuni contenuti - Un avviso il ritardo prima onComplete spara Ciò è dovuto al l'effetto di transizione, il onComplete non fuoco fino a quando l'elemento scorrevole si ferma elasticing si noti inoltre che se si fa clic su avanti e indietro, si annullare la chiamata precedente e dare il nuovo priority. Here è un contenuto - B notate come se si fa clic mi più volte rapidamente mi incatenano gli eventi Questa diapositiva è impostato con il link opzione chain. Here è alcuni contenuti - C. Here è alcuni contenuti - D si noti come non sto agganciato in tutti gli eventi questo è stato fatto con la shortcut. Here è alcuni contenuti - E. To Per saperne di più. è un plugin versatile e incredibilmente utile Per ulteriori informazioni, controllare la documentazione del Fx e docs. Tomorrow s Tutorial. Will postare un link, una volta che è published. MooTools fornisce diverso che contribuirà a ed Queste opzioni vi darà un controllo sulla effects. Let di discutere alcune opzioni che MooTools forniscono Prima di procedere, date un'occhiata al seguente sintassi per la creazione di options. fps fotogrammi opzione second. This per determina il numero di fotogrammi al secondo per l'animazione, mentre morphing possiamo applicare questi fps di trasformarsi o funzionalità Tween per impostazione predefinita, il valore di fps è 50 Questo significa che qualsiasi funzionalità avrà 50 fotogrammi al secondo, mentre noi morphing. Let prendiamo un esempio in cui, noi morph un elemento div con 5 fps Date un'occhiata al seguente code. You riceverà il seguente output. Click sul pulsante START per trovare l'animazione morphing Questo ci aiuta osservare il numero di fotogrammi utilizzati per l'animazione utilizzare valori diversi per fps per ottenere la differenza di animazione si consiglia di utilizzare il valore fps meno oltre 10 Questo vi aiuterà a ottenere l'opzione la differenza easily. This viene utilizzato per impostare il tipo di unità per i numeri in generale, abbiamo tre diversi tipi di unità px, e EMS Date un'occhiata al seguente syntax. The sopra la sintassi è quella di allocare percentuale di unità Ciò significa che tutti i valori in numeri vengono trattati opzione percentages. This come fornisce un modo per gestire più chiamate per avviare un'animazione Se si applica più di eventi chiama alla volta, saranno presi in queste chiamate come chiamate connessione una volta che la prima chiamare finiture, poi la seconda chiamata esegue automaticamente esso contiene le seguenti tre options. ignore Questa è l'opzione predefinita si ignora qualsiasi numero di chiamate fino a che non completa la effect. cancel Questo annulla l'effetto corrente, quando vi è un altro stato fatto Ne consegue la chiamata più recente precedence. Chain in questo modo si concatenano gli effetti insieme e mantenere lo stack delle chiamate esegue tutte le chiamate fino a quando non passa attraverso tutte le chiamate incatenato nella stack. Take uno sguardo al seguente sintassi per utilizzare l'opzione di collegamento option. This viene utilizzato per definire la durata dell'animazione, ad esempio, se si desidera un oggetto per spostare 100px nella durata di 1 secondo, poi si andrà più lento di un oggetto in movimento 1000px in 1 secondo si può inserire un numero che viene misurato in millisecondi oppure si può utilizzare una qualsiasi di queste tre opzioni al posto di numbers. Short 250ms. Normal 500ms default. Long 1000ms. Take un'occhiata al seguente sintassi per l'utilizzo dell'opzione duration. This viene utilizzato per determinare il tipo di transizione, ad esempio, se si dovrebbe essere una transizione graduale o dovrebbe iniziare lentamente poi accelerare verso la fine Date un'occhiata al seguente sintassi per applicare transition. The tabella seguente descrive i diversi tipi di Slideshow transitions. fxSlide - un molto flessibile, ma semplici mootools javascript plugin per scivolo e animare immagini o immagini multiple in once. Many configurabile Options. Horizontal e verticale Slides. You può scorrere più elementi contemporaneamente come 4x1 Immagine-Blocks. Automatic scorrere Functionality. Random pulsanti slide-Image Feature. Slide e scivolo miniature funzionalità. Le pulsanti saranno regolate automaticamente al vostro slideshow. Callback Functionality. You può definire la propria struttura html, quindi non c'è alcuna necessità di modificare il codice HTML esistente se avete già uno sul vostro webpage. Backward Compatibile con le vecchie versioni Mootool 1 2.You possono utilizzare diversi elementi HTML all'interno di uno slide-blocco non ancora testato, ma dovrebbe funzionare senza problems. The alfa scivolo funzione isn t implementata yet. Open la cartella demo e hanno fun. First è necessario includere i seguenti script. o la versione minified. o il proprio nucleo MooTools version. See il per gli esempi, ma in fondo è necessario implementare il codice maggese nel file html head. Implement il codice maggese nel vostro uso file JavaScript domready. If si dispone di una diversa struttura di directory, quindi don t dimenticare per regolare le priorità-immagini nel vostro file. If si desidera modificare l'altezza larghezza gli elementi di scorrimento o la spaziatura tra gli elementi, quindi è sufficiente modificare il file e le line. elements maggese, gli elementi di scorrimento, e g. tabs vero, avete bisogno di una scheda-navigazione per i tuoi Gallery. buttons vero, hai bisogno di un pulsante di navigazione, per la vostra Gallery. imageContainer ul, l'immagine complessiva del contenitore, ad es ul seleziona ul. imageElement Li, i contenitori immagine, ad esempio, li seleziona ul li. slideEffect diapositiva, scegliere tra diverse diapositive effetti di scorrimento, alpha o il proprio one. slideDuration 850, la durata della effect. slideTransition slitta falso, la transizione della diapositiva effect. slideDirection x, scegliere tra una Y orizzontale o una diapositiva x verticale. slideSize 1, quanti diapositive visibile do u want. slideStep auto, quante diapositive devono essere saltato in avanti per passo Number. slideStart 0, Scegli dove la diapositiva dovrebbe start. slideStartRandom falso, la galleria inizia con uno scivolo a caso value. slideAuto vero , Autoslide o off. slideAutoInterval 6000, scegliere un intervallo di durata della sosta Autoslide Effect. slideAutoOnHoverIn, fermare l'effetto Autoslide quando u posiziona il mouse sopra un elemento di navigazione questo include le schede, i pulsanti e gli elementi di scorrimento itself. slideAutoOnHoverOut iniziare, prosegue il Autoslide effetto quando u hover al di fuori di una funzione di navigazione Element. slideCallback, utilizzare il proprio richiamata quando una diapositiva inizia, ad esempio, la funzione slideObject, slideElement, slideNum, slideDuration, slideEffect, funzione slideMode. initCallback Utilizzare la propria richiamata su l'inizializzazione della classe, ad esempio, funzionare slideObject.