Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Zmiana obrazka na sekundę
VishOne
post 18.04.2011, 15:55:00
Post #1





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 6.08.2010

Ostrzeżenie: (0%)
-----

Witam, potrzebuję prostego skryptu, który by zmieniał po wejściu na stronę obrazek na 1s, a następnie powracał do domyślnego. Niestety nie znam JS ani jQuery i dlatego potrzebuję pomocy. Osobiście wykonałbym to na tej zasadzie, że po wejściu na stronę skrypt zmieniałby styl DIV'a na inny, który by zawierał inne tło, a po podanym czasie (w tym przypadku 1 lub 2 sekundy) ponownie zmieniał klasę na poprzednią.

Ogólnie to dałbym coś takiego radę wykonać w JS ale nie wiem ja zaimplementować czas, który by po załadowaniu wszystkiego na stronie, zmieniał klasę DIV'a na określony czas i po tym czasie ponownie powracał do poprzedniej klasy.

Pozdrawiam

Ten post edytował VishOne 18.04.2011, 15:55:15
Go to the top of the page
+Quote Post
jaslanin
post 18.04.2011, 16:20:56
Post #2





Grupa: Zarejestrowani
Postów: 511
Pomógł: 143
Dołączył: 13.03.2010
Skąd: Jasło

Ostrzeżenie: (0%)
-----

po załadowaniu strony:
[HTML] pobierz, plaintext 
  1. <script>
  2.     window.onload = function()
  3.     {
  4.         // cos do zrobienia po zaladowaniu strony
  5.     }
  6. </script>
[HTML] pobierz, plaintext


http://www.w3schools.com/js/js_timing.asp


--------------------
Good luck and happy PHP'ing
Go to the top of the page
+Quote Post
VishOne
post 18.04.2011, 16:31:48
Post #3





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 6.08.2010

Ostrzeżenie: (0%)
-----

A mam jeszcze jedno pytanie, bo jak zrobić tak, że po załadowaniu strony zmieni się klasa to ten obrazek i tak będzie musiał się załadować i przy wolnym łączu lub obciążeniu serwera może wyniknąć sytuacja, w której ta sekunda nie wystarczy (o ile dobrze rozumiem ten cały mechanizm wczytywane jest tylko to co widoczne), dałoby radę jakoś załadować, że tak powiem "z góry" dany obrazek?
Go to the top of the page
+Quote Post
pmir13
post 18.04.2011, 16:58:57
Post #4





Grupa: Zarejestrowani
Postów: 282
Pomógł: 89
Dołączył: 12.04.2011

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4. <style type="text/css">
  5.   DIV { margin:auto; width:200px;height:100px; }
  6.   DIV.pierwszy { background-image:url('obrazek1.jpg');}
  7.   DIV.drugi { background-image:url('obrazek2.jpg');}
  8. </style>
  9.  
  10. <script type="text/javascript">
  11. var obrazki = new Array();
  12. function preload()
  13. {
  14.   for (i=0; i<preload.arguments.length; i++)
  15.   {
  16.     obrazki[i] = new Image();
  17.     obrazki[i].src = preload.arguments[i];
  18.   }
  19. }
  20.  
  21. preload("obrazek1.jpg","obrazek2.jpg" );
  22.  
  23. function zmien_obrazek()
  24. {
  25.   var image = document.getElementById('obrazek');
  26.   if( image.className == 'pierwszy' )
  27.     image.className = 'drugi';
  28.   else 
  29.     image.className = 'pierwszy';
  30.   setTimeout('zmien_obrazek()', 1000);
  31. }
  32. </script> 
  33.  
  34. </head>
  35. <body onLoad="setTimeout('zmien_obrazek()', 1000)">
  36. <div id="obrazek" class="pierwszy">
  37. </div>
  38. </body>
  39. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
VishOne
post 18.04.2011, 18:39:36
Post #5





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 6.08.2010

Ostrzeżenie: (0%)
-----

Dzięki za napisanie skryptu, a dałoby radę jeszcze zatrzymać to po pierwszym wykonaniu bo niestety ale nie znam żadnych wbudowanych funkcji JS oprócz kilku podstawowych i nie wiem jakiej użyć.

Chodzi o to, aby po wejściu na stronę użytkownikowi mignął inny obrazek a później już był stały.

Ten post edytował VishOne 18.04.2011, 18:40:50
Go to the top of the page
+Quote Post
pmir13
post 18.04.2011, 20:52:01
Post #6





Grupa: Zarejestrowani
Postów: 282
Pomógł: 89
Dołączył: 12.04.2011

Ostrzeżenie: (0%)
-----

Usuń linię 30.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 31.05.2025 - 00:21
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn