Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] efekty wpadania po odświeżaniu diva
Forum PHP.pl > Forum > Przedszkole
djsalat
18.08.2010, 21:11:56
witam:)
Chcialem powiedzieć na wstępie ze nie kminię javacripta i chciałbym aby ktoś mnie nakierował delikatnie albo sam powiedział co dopisać i w którym miejscu aby po odświeżeniu poniżej podanego pliku plik sie tak fajnie nakładał z efektem wpadania albo nakładania.

o to pliki


1. który ma tego diva który się odświeża ( "responsecontainer") i chce zeby on własnie po kazdym odświeżeniu się jakoś nakładał albo wpadał czy coś w tym stylu:)

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
  4. <script src="jquery-1.3.2.min.js"></script>
  5.  
  6. <script>
  7.  $(document).ready(function() {
  8.  	 $("#responsecontainer").load("response.php");
  9.    var refreshId = setInterval(function() {
  10.       $("#responsecontainer").load('response.php?randval='+ Math.random());
  11.    }, 9000);
  12. });
  13. </script>
  14. </head>
  15. <body>
  16.  
  17. <div id="responsecontainer">
  18. </div>
  19. </body>
[HTML] pobierz, plaintext


2. ten to już zbedny do podania tu ale pokaże ;p bo tu jest ta treść która ma wpadaćsmile.gif

[HTML] pobierz, plaintext 
  1. <? echo rand(); ?>
[HTML] pobierz, plaintext


3. to oczywiście biblioteka jquery...




kapuch
18.08.2010, 21:19:14
Musisz to jakos lepiej opisac bo:
Cytat
i chce zeby on własnie po kazdym odświeżeniu się jakoś nakładał albo wpadał czy coś w tym stylu:)

malo kto zrozumie, nawet ja po paru browarach nie jestem w stanie tego rozkminic, a zazwyczaj po browarze rozjasnia mi sie umysl winksmiley.jpg
Daj jakis przyklad - strone, albo opisz dokladniej.
djsalat
18.08.2010, 21:23:51
to jest sobie taki skrypt co odswierza jeden div co jakis czas. No i po każdym odświeżeniu chciałbym aby to co nowe przyjdzie po odświeżeniu wchodziło z efektem np którymś z tych : http://jquery.malsup.com/cycle/
kapuch
18.08.2010, 21:37:37
No to praktycznie sam sobie udzieliles odpowiedzi, a dokladniej wystarczy ten Twoj skrypt ladowania dac wewnatrz funkcji odpowiedzialnej za ta animacje, w jquery chyba kazda funkcja ma miejsce na kod, ktory ma sie wykonac po skonczeniu animacji i tam wlasnie wstawiasz ten kod do ladowania tresci.
Nie chce mi sie zagladac w kod tej strony wiec posluze sie funkcja animate() dla przykladu:
[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function() {
  2.   $('#responsecontainer').animate({ // costamcostam
  3.   }, 5000, function() {
  4.     // A tutaj wklejasz kod odpowiedzialny za ladowanie tresci, ale juz bez $('document)ready....,ktory wykona sie po skonczeniu animacji
  5.     // czyli tak:
  6.     $("#responsecontainer").load("response.php");
  7.     var refreshId = setInterval(function() {
  8.     $("#responsecontainer").load('response.php?randval='+ Math.random()); }, 9000);
  9.   });
  10. });
[JAVASCRIPT] pobierz, plaintext

Jak nie bedzie dzialac to pokombinuj, bo moze czegos zapomnialem wykasowac, lub dodac - poprostu kopiowalem na szybko.
Ale powinno byc ok.
djsalat
19.08.2010, 00:18:39
coś nie tak;/ nie ma zmian wogóple tak jak przedtem sie pojawiło tak jest zero animacji:(

najlepszy byłby dla mnie ten drugi efect na tej stronie http://www.givainc.com/labs/marquee_example.htm

tylko jak go połączyć z tym sad.gif
kapuch
20.08.2010, 12:05:28
Tak jak pisalem, nie wiem czy tamte funkcje maja mozliwosc wykonania kodu, kiedy dana animacja bedzie skonczona, bo na jquery slabo sie znam.
Ale jesli maja to napewno da sie to zrobic.
Ja posluze sie kolejnym przykladem, na funkcjach fadeOut() i fadeIn(), mozliwe ze ten efekt ci wystarczy, a jesli nie, to
chociaz bedziesz wiedzial jak sie to m/w robi:

Plik INDEX HTML/PHP jak wolisz
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Costamcostam</title>
  6. <style type="text/css">
  7. .slideshow{
  8. 	border: 1px solid #000;
  9. 	width: 300px;
  10. 	height: 60px;
  11. 	background: #CC0;
  12. 	font-family: Verdana, Geneva, sans-serif;
  13. 	font-size: 16px;
  14. 	color: #000;
  15. 	text-align: center;
  16. 	vertical-align: middle;
  17. }
  18. </style>
  19. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script type="text/javascript">
  21. function animuj() {
  22.     $('.slideshow').fadeOut('slow', function() {
  23. 		$('.slideshow').load("plik.php?id="+Math.random(), function() {
  24. 			$('.slideshow').fadeIn('slow');
  25. 		});
  26. 	});
  27. // zamiast atrybutu 'slow' w funkcjach fadeOut() i fadeIn(), mozesz wpisac np. 4000 zeby dluzej trwal efekt.
  28. }
  29. </script>
  30. </head>
  31.  
  32. <body onload="setInterval('animuj()', 4000);"> <!-- TU USTAWIASZ ODSTEP CZASOWY -->
  33. <div class="slideshow">
  34. Puste
  35. </div>
  36.  
  37. </body>
  38. </html>
[HTML] pobierz, plaintext


A TUTAJ PRZYKLADOWY PLIK Z TRESCIA (plik.php)
[PHP] pobierz, plaintext 
  1. <?php
  2. echo 'Losowa liczba:<br /><B>'.$_GET['id'].'</B>';
  3. ?>
[PHP] pobierz, plaintext

U mnie to dziala ladnie.
djsalat
20.08.2010, 13:41:52
o to mi chodziło:)))

genialny jesteś;p

a są jeszcze jakieś inne efekty zamiast fade in i fade out??


Szczerze mówiąc interesował by mnie cos w podobie co na tej stronie http://www.malsup.com/jquery/cycle/cover2.html
kapuch
20.08.2010, 18:21:52
Zobacz to:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. h2 { margin: 5px 0px 0px 0px; }
  8. /* ================ PRZYKLAD 1 ================= */
  9. .container1{
  10. 	border: 1px solid #000;
  11. 	width: 300px;
  12. 	height: 60px;
  13. 	background: #FFF;
  14. 	font-family: Verdana, Geneva, sans-serif;
  15. 	font-size: 16px;
  16. 	color: #000;
  17. 	text-align: center;
  18. 	vertical-align: middle;
  19. }
  20. #slideshow1{
  21. 	background: #C9F;
  22. 	height: inherit;
  23. 	width: inherit;
  24. }
  25.  
  26. /* ================= PRZYKLAD 2 ================ */
  27. .container2{
  28. 	position: relative;
  29. 	width: 200px;
  30. 	height: 200px;
  31. 	background: #CCF;
  32. 	border: 1px solid #000;
  33. 	overflow: hidden;
  34. }
  35. #slideshow2{ 
  36. 	background: #666; 
  37. 	position:absolute; 
  38. 	top: 0px; 
  39. 	left: 0px; 
  40. 	width: inherit;
  41. 	height: inherit;
  42. }
  43.  
  44. /* =============== PRZYKLAD 3 ================== */
  45. .container3{
  46. 	position: relative;
  47. 	width: 200px;
  48. 	height: 200px;
  49. 	background: #CCF;
  50. 	border: 1px solid #000;
  51. 	overflow: hidden;
  52. }
  53. #slideshow3{ 
  54. 	background: #666; 
  55. 	position:absolute; 
  56. 	top: 0px; 
  57. 	left: 0px; 
  58. 	width: inherit;
  59. 	height: inherit;
  60. }
  61. </style>
  62. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  63. <script type="text/javascript">
  64. // =============== PRZYKLAD 1 ==================
  65. function animuj1() {
  66.     $('#slideshow1').fadeOut('slow', function() {
  67. 		$('#slideshow1').load("plik.php?id="+Math.random(), function() {
  68. 			$('#slideshow1').fadeIn('slow');
  69. 		});
  70. 	});
  71. }
  72.  
  73. // =============== PRZYKLAD 2 ==================
  74. function animuj2(){
  75.     $('#slideshow2').animate({
  76.     left: '-=200px'
  77.   }, 'slow', function() {
  78.  		$('#slideshow2').load("plik.php?id="+Math.random(), function() {
  79. 			$('#slideshow2').animate({ left: '+=200px' }, 'slow');
  80. 		});
  81.   });
  82. }
  83.  
  84. // =============== PRZYKLAD 3 ==================
  85. function animuj3(){
  86.     $('#slideshow3').slideUp('slow', function() {
  87.  		$('#slideshow3').load("plik.php?id="+Math.random(), function() {
  88. 			$('#slideshow3').slideDown('slow');
  89. 		});
  90.   });
  91. }
  92. </script>
  93.  
  94. </head>
  95.  
  96. <body onload="setInterval('animuj1()', 4000); setInterval('animuj2()', 4000); setInterval('animuj3()', 4000); setInterval('animuj4()', 4000);">
  97. <!--=============== PRZYKLAD 1 ==================-->
  98. <h2>Przykład 1</h2>
  99. <div class="container1">
  100. 	<div id="slideshow1">Puste</div>
  101. </div>
  102.  
  103. <!--=============== PRZYKLAD 2 ==================-->
  104. <h2>Przykład 2</h2>
  105. <div class="container2">
  106. 	<div id="slideshow2">Puste</div>       
  107. </div>
  108.  
  109. <!--=============== PRZYKLAD 3 ==================-->
  110. <h2>Przykład 3</h2>
  111. <div class="container3">
  112. 	<div id="slideshow3">Puste</div>       
  113. </div>
  114.  
  115. </body>
  116. </html>
[HTML] pobierz, plaintext

Tak na szybko zrobione, wybierz sobie.
djsalat
20.08.2010, 18:23:02
chyba już znalazłem swoje rozwiązanie:)


korzystałem z tej stronki moze komus terż się przyda do efektów:) :http://blog.alchemycode.pl/2010/01/15/szyb...cja-elementami/

poprostu zamieniłem twoje fade na slide smile.gif dzięki bardzo za pomoc jeszcze raz:)

kapuch
20.08.2010, 18:33:48
Cytat(djsalat @ 20.08.2010, 19:23:02 ) *
chyba już znalazłem swoje rozwiązanie:)


korzystałem z tej stronki moze komus terż się przyda do efektów:) :http://blog.alchemycode.pl/2010/01/15/szyb...cja-elementami/

poprostu zamieniłem twoje fade na slide smile.gif dzięki bardzo za pomoc jeszcze raz:)

Spoko, ale wydaje mi sie ze od slide, lepsze jest animate, tak jak dalem w przykladzie 2, bo wyglada to tak, jakbys zmienial kartke, bo litery ida w lewo razem z divem, a przy slide masz efekt, tak jakbys ucinal diva.
Zawsze mozesz przerobic ten moj 2 przyklad z animate, tak aby zamiast w lewo, przesuwal sie do gory, wystarczy zamienic "left: '-=200px'" ma "top: '-=200px'" i "left: '+=200px'" na "top: '+=200px'".
Chyba bedzie lepiej wygladac - ale to kwestia gustu.
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.