Loading:

Książka Zend Framework 3. Poradnik Programisty.

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>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=5265

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: divix
Ranga: Administrator serwisu Punktów: 37169
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-17 v.1.5 | design: diviXdesign & rainbowcolors