Panorama 360* Opcje

[jpowie01]

Witam,
Chciałbym stworzyć panoramę 360* w JS. Chodzi mi tylko o widok panoramiczny a NIE SFERYCZNY. To znaczy obracanie się tylko w lewo i w prawo. Myślałem, że to nie jest trudne no ale okazało się, że napotkałem pewne problemy.
Moim pomysłem było użycie bibliotek jQuery i jego funkcji 'animate' tak aby po najechaniu na przycisk ze strzałką, panorama przesuwała się w danym kierunku. Kiedy panorama by się skończyła miała by się przenieść na początek. Chcę jak najbardziej ograniczyć "ociężałość" skryptu. Nie chcę powtarzających się w nieskończoność zdjęć, ponieważ gdyby animacja trwała chociażby 20min przeglądarka nawet na dobrym komputerze zaczęłaby chodzić jak czołg. Wiem, że żadna osoba nie będzie przez godzinę oglądać w kółko obracającego się obrazka. Wiem o tym, ale sęk w tym, że chciałbym aby taka sytuacja (może niemożliwa) nie miała w ogóle miejsca. BTW. Aby przenieść się na początek postanowiłem, że będę liczył czas jaki użytkownik "spędzi" na przycisku. Aleeeee... są różne przeglądarki, różne komputery i na niektórych komputerach animacja będzie trwała dłużej u innych krócej. Więc będą powstawać pewne lagi przy przejściu. Zsynchronizowałem nawet tą możliwość na moim komputerze, lecz na drugim była już pewna rozbieżność.
Tak więc: Czy istnieje może jakaś funkcja JS, która mi pomoże w rozwiązaniu problemu ? Za każdy pomysł, wskazówkę, naprowadzenie, chociażby link do strony z podobnym problemem. Będę bardzo wdzięczny :)

Część kodu odpowiadającego za liczenie czasu spędzonego na przycisku (dokładnie ile px ma obecnie lewy margines) oraz animację panoramy.

[HTML] pobierz, plaintext 
$("#prawo").hover(
		function () {
			$('#panorama').animate({marginLeft: '-=10000px'},40000,'linear');
			petlaprawo = setInterval("margin = margin - 1; if(margin == -9220) {margin=15; n++; $('#panorama').stop().css(\"margin-left\",\"0px\").animate({marginLeft: '-=1000px'},40000,'linear');};",1);
		}, 
		function () {
			clearInterval(petlaprawo);
			$('#panorama').stop();
			alert(margin);
		}
	);
[HTML] pobierz, plaintext 

Pozdrawiam,
jpowie01

Proszę o wyrozumiałość :D Dopiero się uczę JS, każdy kiedyś zaczynał i miał jakieś problemy.

-------------------------------------------------------
Już doszedłem do rozwiązania.
Dla potomnych powiem jak do tego doszedłem :D Pomyślałem, że skoro przesuwa się obraz i zmienia się przy tym margines to muszę jakoś pobrać wartość tego lewego marginesu i oczekiwać aż tylko osiągnie oczekiwaną wartość, aby 'powrócić' do początku zdjęcia. Otóż, poprzednio opierałem się na czasie, który na różnych komputerach mógł biec w różnym tempie. Tak więc spróbowałem podejść do tego od drugiej strony. Chciałem pobrać nie przybliżoną wartość marginesu (przesunięcia w czasie), a dokładnego przesunięcia. Pogrzebałem. Pogrzebałem. Pochodziłem po stronie jQuery i przypomniałem sobie o funkcji .css(). Może Was to bawić :D Wiem. Ale użyłem ją może raz w życiu i to na samym początku nauki, ładny kawałek czasu temu :) Tak więc kod sprawdzający margines po modyfikacjach wygląda mniej więcej tak:

[HTML] pobierz, plaintext 
$('#panorama').animate({marginLeft: '-=12000px'},48000,'linear');
			petlaprawo = setInterval("m = $(\"#panorama\").css(\"margin-left\"); if(m=='-14998px'||m=='-14999px'||m=='-15000px'||m=='-15001px'||m=='-15002px'){$('#panorama').stop().css(\"margin-left\",\"-9000px\").animate({marginLeft: '-=12000px'},48000,'linear');};",1);
[HTML] pobierz, plaintext 

Proste, prawda ? A jednak trudne zadanie wymagają odpowiedniego podejścia :D Z natury jestem bardziej kombinatorem. Może dlatego....

Pozdrawiam,
jpowie01

Nie wiem czemu ale jak mam jakiś problem i siedzę nad nim kilka godzin to gdy wstawiam prośbę na forum po chwili zaczynam rozumieć co i jak zrobić :D
Temat do zamknięcia.

Ten post edytował jpowie01 21.10.2011, 19:37:31