Loading:

Rozwiń skrzydła w branży IT [Książki drukowane -35%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.bzflush 2.xslt_error 3.extract() 4.imagewbmp 5.stop() 6.unlink 7.stripos() 8.date_sub() 9.popen 10.umask

56853.05

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 .

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>