Dzisiaj chciałem pokazać Wam jak za pomocą jQuery można uzyskać efekt zmieniającego się płynnie tekstu. Rozwiązanie to wykorzystywane jest na wielu serwisach, zazwyczaj w połączeniu z obrazkiem (jak na tym blogu). Ja skupię się na wyświetlaniu samego tekstu.
Rozpoczniemy tradycyjnie od naszego głównego pliku, w którym dołączymy trzy skrypty JavaScript oraz arkusz stylu CSS:
1 2 3 4 | <link href="style.css" media="screen" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="timer.js"></script> <script type="text/javascript" src="core.js"></script> |
Nasz plik stylu wygląda następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | *{ margin:0px; padding: 0px; outline: 0px; } html,body{ height: 100%; font-family: Verdana; color: gray; font-size: 11px; } #main{ width: 980px; margin:0 auto; overflow: hidden; padding-bottom: 10px; } ul#tabs{ height: 50px; overflow: hidden; display: block; margin-top: 0px; margin-left: 200px; } ul#tabs li{ display: none; font-size: 12px; } |
Najważniejszy tutaj są style definiujące wypunktowanie oznaczone identyfikatorem tabs, bowiem teksty, które mają się zmieniać będą umieszczone w tej liście. Następnie załączamy aktualną bibliotekę jQuery (do pobrania stąd) oraz plugin jQuery.timers jako timer.js. Plugin ten będzie wykorzystywany do odliczania czasu do kolejnej zmiany tekstu. Nasza funkcja odpowiedzialna za płynną zmianę tekstu zawarta jest w pliku core.js, który wygląda następująco:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | $(function(){ $(".active_tab").css("display", "block"); $(document).everyTime(2500, function(i) { $(".active_tab").fadeOut("normal", function(){ if($(".active_tab").next("li").html() == null) { $(".active_tab").removeClass("active_tab"); $("#tabs > li:first").addClass("active_tab"); $(".active_tab").fadeIn("normal"); } else { $(".active_tab").removeClass("active_tab").next("li").addClass("active_tab"); $(".active_tab").fadeIn("normal"); } }); }); }); |
Funkcja wyświetla aktualny element listy, który posiada odwołanie do klasy css active_tab, po upływie założonego czasu element jest za pomocą funkcji fadeOut() chowany, a klasa css active_tab usuwana z aktualnego elementu listy i dodawana do kolejnego elementu listy. W przypadku braku kolejnego elementu jest dodawana do pierwszego. Ostatnim etapem jest wyświetlenie kolejnego elementu listy za pomocą funkcji fadeIn().
Powyższy skrypt wykorzystujemy tworząc zwykłe wypunktowanie z identyfikatorem tabs, czyli wygląda to tak:
1 2 3 4 5 6 | <ul id="tabs"> <li style="display: none;" class="">Tekst 1</li> <li style="display: none;" class="">Tekst 2</li> <li style="display: none;" class="">Tekst 3</li> <li style="display: list-item;" class="active_tab">Tekst 4</li> </ul> |
Jako pierwszy wyświetlany jest ostatni element listy, a następnie kolejno pierwszy, drugi, trzeci, ostatni i znów od początku. Działanie skryptu możecie zobaczyć tutaj.
Popularity: 10%
Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. 
…trochę w ie źle działa. Ja wiem, że to jest do du..y przeglądarka, ale jednak… Chodzi mi o płynność operacji. W ie skacze.
Brak demo …szkoda!
nie ma demo lipaaaa
Przecież jest podane pod koniec wpisu
http://tobiasz.org/skrypty/tabs/
link do dema nie dziala.
już powinien działać
Witam,
Spoko poradnik
Tylko jeżeli w skrypt wstawie więcej tekstu np. zamiast „1″ „mama poszła kupić chleb i boczek” po dłuższym czasie się sypie i wyświetla kilka naraz ;/