News › Moje skrypty › Własny scrollbar

Strona ma nową grafikę - 25 wrz 2005  21:37

 

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure

 

Startujemy - 25 wrz 2005  21:37

 

No one rejects, dislikes, or avoids pleasure itself, because it is pleasure

Strona 1 . 2 . 3

Pływające menu

 

Skrypt będzie płynnie przesuwał blok tekstu, w którym można wstawić np. menu czy reklamę.
Kod js, który należy umieścić (najlepiej w ramach <head>) na stronie wygląda tak:

  1. <script type="text/javascript">
  2.  
  3. y = -150;
  4. gora = 100;
  5. d = document;
  6.  
  7. function przewijaj(){
  8. d.getElementById('menu').style.top= y+gora+'px';
  9. y+=((d.documentElement.scrollTop|| window.pageYOffset||d.body.scrollTop) - y)/10;
  10. t=setTimeout("przewijaj()",20);
  11. }
  12. onload=przewijaj
  13.  
  14. </script>

Aby dostosować do skrypt do swoich potrzeb, należy zmienić następujące wartości:
y - odległość bloku od górnej krawędzi, od której Strona świetnego kursu HTML menu zacznie swoją podróż. Tutaj jest w minusie, żeby menu "wypływało" z góry. Dobrze by było, gdyby ta wartość była również ustalona przy definicji stylów bloku, gdyż w razie długiego ładowania strony mogłoby to brzydko wyglądać
gora - odległość od górnej krawędzi, do której to blok będzie dążył. Po osiągnięciu tej odległości, zatrzyma się.
10 - określa długość skoku, im większa wartość, tym menu będzie się szybciej poruszało, ale mniej płynnie
20 - co ile milisekund ma następować skok

Należy jeszcze stworzyć blok, który będzie się przesuwał. Tego nie trzeba kopiować; jedyne co z poniższego jest niezbędne, to absolutne wypozycjonowanie diva (bądź dowolnego innego elementu, który sobie wybierzecie) oraz id="menu"

  1. <div id="menu" style="position: absolute; top: -150px; left: 30px; width: 80px; text-align: left; padding-left: 10px;">
  2. <br />link1 <br />link2 <br />link3 <br />link4 <br />
  3. </div>

Przykładowe zastosowanie można zobaczyć tutaj.