Mootools fx opcje slajdów

30 dni MooTools.30 dni MooTools to zbiór ćwiczeń, aby nauczyć się korzystać z biblioteki javascrit MooTools, opublikowanej po raz pierwszy w 2008 roku przez ConsiderOpen. Lekcje są w rzeczywistości 23, ponieważ zostały przerwane po tym dniu. Jak oryginalna witryna jest obecnie offline, samouczki zostały zebrane przy użyciu maszyny Wayback Machine, aby udostępnić je wszystkim zainteresowanym nauką korzystania z MooTools. Samouczki oparte są na MooTools 1 2, więc niektóre części mogą zostać wycofane i powinny być aktualizowane i rozszerzane na podstawie nowych MooTools wersje. Prawa autorskie i wdzięczność za oryginalne lekcje są przechowywane przez ConsiderOpen. Displaying elements with. Welcome na dzień 23 z 30 dni Mootools 1 2 tutoriale Jeśli już nie masz dostępu, sprawdź wszystkie pozostałe mootools series Kontynuuj nasze samouczki o wtyczkach Fx, obejrzymy tę wtyczkę, która pozwala wyświetlać treść, przesuwając ją w widok Jest bardzo prosta w obsłudze i stanowi świetny dodatek do narzędzi interfejsu użytkownika t. Jak wszystkie inne klasy, które sprawdziliśmy, pierwszą rzeczą, którą musisz zrobić, jest zainicjowanie nowej instancji klasy i zastosowanie jej do elementu. Pierwsze, pozwala skonfigurować nasz kod HTML dla elementu slajdów. A my nasz css nie robi t muszą być cokolwiek fancy. Finally, zaczynamy nowe wystąpienie i przekazać nasz element variable. Since jest rozszerzeniem Fx, można użyć dowolnego z opcji Fx i zdarzeń, ale nie pochodzi z zestawem opcji itself. There są tylko dwie opcje, tryb i opakowanie Frankly, nigdy nie znalazłem siebie za pomocą opakowania nigdy nie natknąłem się na potrzebę, ale tryb jest tym, co określa, czy chcesz przesuwać się poziomo lub pionowo. Mode daje dwie możliwości, pionowe lub poziome Pionowe ujawnia od góry do dołu i poziomej ujawnia od lewej do prawej Nie ma opcji, aby przejść od dołu do góry lub od prawej do lewej, bo rozumiem, że włamanie się klasy do osiągnięcia tego jest względnie proste Moim zdaniem jest to opcja I chciałby zobaczyć standard, a jeśli ktoś włamał się do tej klasy, upuść nam notatkę. Domyślnie wyrzuca opakowanie wokół elementu slajdu, nadając mu przepełnienie Wrapper pozwala na ustawienie innego elementu jako opakowania Jak już wspomniałem powyżej, nie jestem jasny gdzie byłoby to przydatne i byłby zainteresowany usłyszeć wszelkie myśli dzięki horseweapon na za pomagając mi to jasne. zawiera wiele metod pokazywania i ukrywania elementu. Jak sama nazwa wskazuje, ta metoda spowoduje uruchomienie zdarzenia startowego i ujawni jego element. Zwalnia element z powrotem do ukrytego stanu. Może to przesunąć element lub wyjść, w zależności od jego aktualny stan Bardzo przydatna metoda dodawania do zdarzeń kliknięcia. To ukryje element bez efektu slajdów. Wyświetli element bez efektu slajdów. tryb nadmiarowy z metodami. Każda z powyższych metod akceptuje również jako opcjonalny parametr, pozwalając możesz zastąpić wszystko ustawione w opcjach. skrótów. Klasa zawiera również przydatne przydatne skróty do dodawania efektu do elementu. Zamiast rozpoczęcia nowej klasy, można utworzyć nową instancję, jeśli ustawisz opcję slajdów na element. setting options. You można nawet ustawić opcje za pomocą skrótu. Gdy slajd można rozpocząć za pomocą metody. slide będzie akceptowalny. each odpowiadający powyższym metodom. To bardzo dużo obejmuje podstawowe informacje Poniższy przykład używa większości tego, co dowiedzieliśmy się powyżej, wyświetla kilka różnych rodzajów slajdów i zapewnia niektóre wskaźniki divs, dzięki czemu można oglądać zdarzenia. Pierwsze, skonfigurować html. Now, nasz css Możemy utrzymać to dość proste. Wreszcie nasze mootools javascript. Here jest trochę zawartości - A Zwróć uwagę na opóźnienie przed onComplete pożary to ze względu na efekt przejścia, onComplete nie wystrzeli, dopóki element slajdów przestanie się elastyczny Ponadto zauważysz, że jeśli klikniesz tam iz powrotem, anulujesz poprzednie wywołanie i nadasz nowy priorytet. Ta lista zawiera treść - B Zwróć uwagę, jak to zrobić, jeśli klikniesz mn wiele razy q uickly I łańcucha zdarzeń Ten slajd jest skonfigurowany z łańcuchem link opcji. Tutaj jest kilka treści - C. Oznacza się, że niektóre treści - D Zwróć uwagę, jak nie jestem podłączony do jakichkolwiek zdarzeń To zostało zrobione z skrótem. Tutaj jest kilka treści - E. To Dowiedz się więcej. jest wszechstronną i niezwykle przydatną wtyczką Aby dowiedzieć się więcej, sprawdź dokumenty i Fx docs. Tomorrow s Tutorial. Will po link po opublikowaniu. MooTools oferuje różne, które pomogą i te opcje daje kontrolę nad efekty. Przejmi o kilku opcjach, które MooTools zapewniają Przed przystąpieniem do dalszej analizy, spójrzmy na następującą składnię ustawień frames. fps na sekundę. Ta opcja określa liczbę klatek na sekundę w animacji, a morfing Możemy zastosować te fps do funkcji Morph lub Tween Domyślnie wartość fps wynosi 50 Oznacza to, że każda funkcja będzie miała 50 klatek na sekundę podczas morfowania. Załóżmy przykład, w którym będziemy morph z elementem div przy 5 fps. Spójrz na poniższe code. You otrzyma następujące wyjście. Kliknij na przycisk START, aby znaleźć animację morfingu Pomaga to zaobserwować liczbę ramek używanych do animacji Użyj różnych wartości dla fps, aby uzyskać różnicę w animacji Reco mmended do używania wartości fps poniżej 10 To pomoże Ci łatwo uzyskać różnicę. Ta opcja jest używana do ustawiania typu jednostki dla liczb Ogólnie mamy trzy różne typy jednostek px, i ems Spójrzmy na następującą składnię . Powyższa składnia to przyporządkowanie procentów do jednostek Oznacza to, że wszystkie wartości w liczbach są traktowane jako procenty. Ta opcja umożliwia zarządzanie wieloma połączeniami, aby rozpocząć animację. jako połĘ ... czenia połĘ ... czenia Po zakoń czeniu pierwszego połĘ ... czenia drugie połĘ ... czenie zostanie wykonane automatycznie Zawiera trzy nastę pujĘ ... ce opcje. ignore Jest to opcja domyś lna Zignoruje dowolnĘ ... liczbę wywoła do momentu zakoń czenia efektu. cancel To anuluje aktualny efekt, jest kolejnym czynnikiem, który wynika z najnowszego priorytetu połączenia. Chain Umożliwia łączenie efektów razem i utrzymanie stosu połączeń Wykonuje wszystkie połączenia, aż przechodzi przez wszystkie połączenia łańcuchowe w stosie. Zapoznaj się z następującą składnią służącą do korzystania z opcji link. Ta opcja jest używana do zdefiniowania czasu trwania animacji Na przykład, jeśli chcesz, aby obiekt przemieścił 100 pikseli w ciągu 1 sekundy, będzie on wolniejszy od obiektu przesuwanie 1000px w ciągu 1 sekundy Możesz wprowadzić liczbę, która jest mierzona w milisekundach lub możesz użyć dowolnej z tych trzech opcji zamiast cyfr. Short 250ms. Normalna wartość domyślna 500ms. Long 1000ms. Zobacz poniższą składnię w celu użycia czasu trwania. Ta opcja jest używana do określania typu przejścia Na przykład, jeśli powinno to być płynne przejście lub powinno ono powoli zacząć powoli, a następnie przyspieszyć do końca Sprawdź poniższą składnię, aby zastosować przejście. Poniższa tabela zawiera opis różnych typów Transitions. fxSlide Slideshow - bardzo elastyczna, ale prosta wtyczka javascript mootools umożliwiająca przesuwanie i animowanie obrazów lub wielu obrazów jednocześnie. Wiele konfigurowalnych opcji. Restrukcji poziomej i pionowej. Można przesuwać wiele elementów na raz, podobnie jak 4x1 I mage-Blocks. Automatic Slide Functionality. Random Slide-Image Feature. Slide Przyciski i Miniatury Funkcjonalność. Przyciski slajdów zostaną automatycznie dopasowane do pokazu slajdów. Callback. Możesz zdefiniować własną strukturę html, więc nie musisz zmieniać swojej istniejący kod html, jeśli masz już na swojej stronie internetowej. Związanie z poprzednimi wersjami Mootool 1 2.Możesz używać różnych elementów html wewnątrz bloku slajdów, które nie zostały jeszcze przetestowane, ale powinno działać bez problemów. Nazwa slajdów alfa nie jest zaimplementować jeszcze. Następnie folder demo i mieć fun. First musisz uwzględnić następujące skrypty. lub wersji minified. lub własna mootools core version. See na przykłady, ale w zasadzie musisz zaimplementować fallowing kod do pliku html head. Implement do fallowing kodu w swoim pliku Javascript używać domready. If masz inną strukturę katalogów, a następnie zapomnieć aby dostosować obrazy tła w pliku. Jeśli chcesz zmienić wysokość szerokości elementów slajdów lub odstępów między elementami, a następnie zmień plik i linię obciążeń, elementy slajdów, e g. tabs true, Czy potrzebujesz Tab-Navigation dla swojej galerii. Przyciski true, potrzebujesz Button-Navigation dla Gallery. imageContainer ul, Twój ogólny pojemnik obrazu, np. Ul wybiera ul. imageElement li, Twoje kontenery obrazu, np. Li wybiera ul li. slideEffect slajd, wybierz spośród różnych slajdów slajdów slajdów, alfa lub własne. one. slideDuration 850, czas trwania efektu slajdów. slideTransition false, przejście efektu slajdów. slideDirection x, wybierz pomiędzy poziomym y lub ver tical slide x. slideSize 1, Ile widocznych slajdów nie chce want. slideStep auto, Ile slajdów powinno być przeskakiwane do przodu na krok Number. slideStart 0, Wybierz gdzie slajd powinien start. slideStartRandom false, Galeria zaczyna się od losowej wartości slajdów. slideAuto true, AutoSlide on lub off. slideAutoInterval 6000, wybierz interwał czasowy efektu AutoSlide Effect. slideAutoOnHoverIn, zatrzymaj efekt AutoSlide, gdy u ustawisz kursor nad Elementem Nawigacji to obejmują karty, przyciski i same elementy slajdów. SitOutoOnHoverOut start, Kontynuowanie efektu AutoSlide podczas używania funkcji nawigacji poza elementem Navigation Element. slideCallback Użyj własnego zwrotu po uruchomieniu slajdu, np. Function slideObject, slideElement, slideNum, slideDuration, slideEffect, slideMode. initCallback Użyj własnego Callback na inicjalizacji Klasa, np. Function slideObject.