Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery]Poruszanie divem
Forum PHP.pl > Forum > Przedszkole
murrey
Witam mam następujący problem, chcę aby div poruszał się po oknie przeglądarki do miejsca klikniętego przez użytkownika. To potrafię zrobić ale mam problem z tym, że im odległość jest większa od aktualnej pozycji diva tym porusza się on szybciej, a ja chciałbym aby poruszał się ze stałą prędkością za każdym razem. W googlach ostatnio znalazłem rozwiązanie tego problemu ale nie zachowałem linka :/

Mam coś takiego:

  1. $(document).ready(function() {
  2. $('#viewport').bind('click', function(event) {
  3. $('#d').animate({
  4. left:event.pageX,
  5. top:event.pageY
  6. }, 2000, 'linear');
  7. }
  8. });
  9. });
vonski
Jeżeli chcesz żeby div zawsze poruszał się z tą samą prędkością to czas trwania ruchu nie może być stały. Musisz uzależnić czas od drogi jaką ma do przebycia element. Dlatego też musisz jakoś tę drogę wyliczyć, najlepiej chyba na podstawie współrzędnych - aktualnych (przed rozpoczęciem ruchu) i docelowych (po zakończeniu animacji). Odejmujesz od siebie współrzędne, odpowiednio |x2 - x1| i |y2 - y1|. Musisz pamiętać żeby wyznaczyć wartość bezwzględną, bo możesz dostać ujemne wyniki. Jak to zrobisz, to dostaniesz w pewnym sensie długości boków trójkąta, którego przeciwprostokątna to szukana droga. Mam nadzieje, że wiesz jak się liczy długość przeciwprostokątnej, mając dane a i b wink.gif
A jak już wyliczysz drogę, to możesz ją po prostu podstawić do .animate() zamiast tego '2000'. Z tym że jeśli to zrobisz to animacja będzie bardzo szybka więc będziesz musiał dostosować tą prędkość do swoich potrzeb, np. przemnożyć drogę przez 5 i dopiero wtedy podstawić wynik do .animate().

To jedyne co mi przychodzi do głowy o tej porze wink.gif
murrey
Z trójkąta pitagorasa to bez problemu wyliczę drogę i podstawię wink.gif
Myślałem że jest inny sposób, w tamtym przykładzie który znalazłem wtedy użyta była funkcja setTimeout() tylko za cholerę nie mogę tego znaleźć
vonski
Może ta biblioteczka Ci pomoże:
https://github.com/lukeshumard/supremation

Cytat
The usage for supremate is almost exactly the same as jQuery's .animate method, except for that duration has been replaced with speed. Speed is defined in units of pixels / second.
murrey
Co prawda nie chciałem angażować już więcej bibliotek ale to jest to o co mi chodziło. Poczekam jeszcze może ktoś przedstawi inne rozwiązanie jeśli nie użyję tego. Dzięki wink.gif
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.