Loading:


    Animowany brandmark podążający za scroll'em [ jQuery ] + działa w IE 6

    Skrypt tworzy z tagu o ID 'brandmark' element, który płynnie sie przesuwa, kiedy użytkownik przesunie suwakiem stronę. Domyślnie element jest wyrównany do górnego i lewego brzegu aktualnego okna przeglądarki.

     

    Za pomocą kontrolera skryptu może zmienić nazwę ID elementu, który ma się animować, odległość od górnego brzegu okna oraz prędkość przesuwania się elementu:

     

    element_id = "brandmark";
    odleglosc = 10;
    predkosc = 70;

     

    UWAGA! - ten przykład wykorzystuje bibliotekę jQuery, którą można pobrać  [ tutaj ].

     

    Listing 1.0 zawiera kod JavaScript.

     

    Listing 2.0 zawiera natomiast cały kod HTML, który działa jeśli go wkleimy do pliku .html .



    Napisz Artyku³

    Listing

    //Listing 1.0

    var element_id = "brandmark";
    var odleglosc = 10;
    var predkosc = 70;
           
    $(window).scroll(function () {
            var scrollPozycja = $(window).scrollTop()+odleglosc;
            $("#"+element_id).animate({
            'top' : scrollPozycja+'px'
            }, predkosc);
    });


    //Listing 2.0

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
    <script language="javascript" type="text/javascript" src="../js/jquery-1.4.1-min.js"></script>
    <script language="javascript" type="text/javascript">
    //KONTROLER SKRYPTU
    var element_id = "brandmark";
    var odleglosc = 10;
    var predkosc = 70;
    //Pobrano z Funkcje.net
           
    //NIE DO EDYCJI
    $(window).scroll(function () {
            var scrollPozycja = $(window).scrollTop()+odleglosc;
            $("#"+element_id).animate({
            'top' : scrollPozycja+'px'
            }, predkosc);
    });
    </script>
    <title>Strona Główna Publicysta.net</title>
    </head>

    <body>
    <div style="background:red;widh:150px;height:70px;position:absolute;top:20px" id="brandmark">
    Funkcje.net
    </div>
    </body>
    </html>




    Dodano przez: divix
    Ranga: Administrator serwisu Punktów: 0
    Komentarze użytkowników
      • Tre¶æ komentarza
        Kod do komentarza (opcjonalnie)
        PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
        Autor
        Token
        token

         

         








    funkcje.net
    Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2025 v.1.5 | design: diviXdesign & rainbowcolors