Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Płynne przewijanie
Forum PHP.pl > Forum > Przedszkole
sweter
Witam,
mam na swojej stronie długiego diva który jest usytuowany względem innego diva (czyli przez position:relative).
Chciałbym, żeby po najechaniu myszą na div "left" owy div przesuwał się w lewo z prędkością 100px/sek.
Gdy odjadę kursorem akcja ma się przerwać.

Możecie doradzić jak takie coś skonstruować?
Domyślam się, że trzeba wykorzystać metodę zwraającą obecny czas w milisekundach.
Nie proszę o gotowy kod (chociaż i takim nie pogardzę smile.gif), ale o łopatologiczne wyjaśnienie mi jak wykonać taki skrypt.
Pawel_W
http://api.jquery.com/animate/
sweter
Dzięki, ale mi chodziło o wyjaśnienie jak powinien wyglądać skrypt, który by przesuwał (animował) diva smile.gif
zegarek84
Cytat(sweter @ 13.06.2010, 11:24:00 ) *
Chciałbym, żeby po najechaniu myszą na div "left" owy div przesuwał się w lewo z prędkością 100px/sek.
by uzyskać efekt płynnego przewijania to musisz mieć tak jak to z filmami mniej więcej 25fps [25 ramek na sekundę] gdy przeskoki są większe niż o 1 piksel - czyli tutaj jeśli stała prędkość przewijania to 100px/25 -> 4px co 40milisekund [mniej więcej]...

[js]Ruchome tło
Automatyczne, płynne przewijanie tekstu w warstwie, bez zacinania

oczywiście do wykonania tego będziesz potrzebował albo skorzystać z setinterval albo z settimeout [polecam to drugie jeśli miało by trafić mało optymalne rozwiązanie na słabą maszynę - najwyżej wyjdzie wolniejsza animacja - no zależy jak to zrobisz... trochę o stosowaniu tych funkcji pisałem tutaj:
[JavaScript]Problem z setInterval - wspominałem tam jak z tych funkcji korzystać by nie wywoływać nie jawnego evala [przede wszystkim wolniejszego] - jest tam też link do tematu z grą snake gdzie masz przykład hermetyzacji kodu - gdyż na jakichś zmiennych będziesz musiał odkładać bieżący stan animacji... oczywiście by było łatwiej możesz skorzystać jeszcze z jakiegoś fremworka typu jQuery...
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.