Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Slidujący div
jagon
post 10.05.2011, 13:29:13
Post #1





Grupa: Zarejestrowani
Postów: 80
Pomógł: 0
Dołączył: 20.10.2007

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

Witam, postaram się jak najprościej przedstawić swój problem. Otóż męczę się ze "slidującym" divem, problem w tym, że wyjezdza on ze skrajnej lewej strony. Chciałbym, aby jego "startem" był niebieski div. Najprościej mówiąc - chcę aby czerwony slajdujący div startował z początku niebieskiego diva.

Poniżej zamieszczam kod, liczę na pomoc.

slide.html
[HTML] pobierz, plaintext 
  1. <html>
  2. <head><title></title>
  3. <script type="text/javascript" language="javascript" src="slide.js"></script>
  4. </head>
  5. <body>
  6.  
  7. <div style='position: absolute; margin: 50px; background: blue; width: 400; height: 400;'>
  8. <div id="d1" style="position: absolute; left:-150px; background: red;">horizontally sliding div</div>
  9. </div>
  10.  
  11. </body>
  12. </html>
[HTML] pobierz, plaintext


slide.js
[JAVASCRIPT] pobierz, plaintext 
  1. //<![CDATA[
  2.  
  3. window.onload=function()
  4. {
  5. window.setTimeout('slideIt();');
  6. window.setTimeout('slideIn();', 3000);
  7. };
  8.  
  9. function slideIt()
  10. {
  11.  
  12. var slidingDiv = document.getElementById("d1");
  13. var stopPosition = 50;
  14.  
  15. if (parseInt(slidingDiv.style.left) < stopPosition )
  16. {
  17. slidingDiv.style.left = parseInt(slidingDiv.style.left) + 7 + "px";
  18. setTimeout(slideIt, 1);
  19. }
  20. }
  21.  
  22. function slideIn()
  23. {
  24.  
  25. var slidingDiv = document.getElementById("d1");
  26. var stopPosition = -150;
  27.  
  28.  
  29. if (parseInt(slidingDiv.style.left) > stopPosition )
  30. {
  31. slidingDiv.style.left = parseInt(slidingDiv.style.left) - 7 + "px";
  32. setTimeout(slideIn, 1);
  33. }
  34.  
  35. }
  36. //]]>
[JAVASCRIPT] pobierz, plaintext
Powód edycji: [Ociu]: poprawiłem bbCode
Go to the top of the page
+Quote Post
t_e_l
post 10.05.2011, 17:31:23
Post #2





Grupa: Zarejestrowani
Postów: 21
Pomógł: 5
Dołączył: 7.05.2011

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

Nie wiem czy dobrze myślę ale wydaje mi się, że wystarczy zmienić "var stopPosition = -150;" na "var stopPosition = 0;"
Go to the top of the page
+Quote Post
jagon
post 13.05.2011, 17:18:57
Post #3





Grupa: Zarejestrowani
Postów: 80
Pomógł: 0
Dołączył: 20.10.2007

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

Po zmianie którą zaproponowałeś sprawa wygląda następująco: czerwony div w dalszym ciągu wyjezdza z maksymalnej lewej strony natomiast "chowając się" zatrzymuje się prawidłowo(na początku niebieskiego diva)

odświeżam...
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: 30.06.2025 - 11:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn