Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][JavaScript] Losowanie liczby (animacja)
mfernal010
post 22.06.2015, 12:50:16
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 22.06.2015

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

Witam wszystkich Serdecznie.

Znalazłem na forum skrypt: Temat: innePHPLosowe wyswietlanie obrazkow

Przerobiłem go pod siebie lecz mam problem mianowicie chciałbym, aby losowanie nie było od prawej do lewej lecz od góry do dołu lub na odwrót. facepalmxd.gif

Aktualnie mój kod wygląda tak: 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  5. <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
  6.  
  7.      <script src="howler.js"></script> 
  8.  
  9.   <style>
  10.  
  11.  
  12.  
  13.  
  14.     #wrapper { position: absolute; top: 22px; width: 100px; height: 720px; overflow: hidden;
  15.  
  16. 	}
  17.     ul {list-style-type: none; margin: 0px; padding: 1px; width: 100%; }
  18.     li {list-style-type: none;  float: left; width: 90px; height: 90px; margin: 5px;   
  19. 	background: url(images/los.png); text-align: center; 
  20. 	line-height: 75px; 
  21. 	 font-size: 25px;
  22. 	 color: #8f8f8f;
  23.   font-family: 'Ubuntu', sans-serif; 
  24.   font-weight: 400; position: relative; left: 0px;  }
  25.     #result {width: 100px; height: 100px;}
  26.  
  27. 	#button{
  28. 	position: absolute; 
  29. 	left: 250px;
  30. 	 background: url(images/button.png);
  31. 	 width: 199px; height: 45px;
  32. 	 border: 0px;
  33. 	      color: #ffffff;
  34.   font-size: 17px;
  35.   font-family: 'Ubuntu', sans-serif; 
  36.   font-weight: 400; 
  37.  
  38. 	}
  39.   </style>
  40. </head>
  41. <body>
  42.  
  43.   <div id="ramka">
  44.  
  45.  <div id="wrapper">
  46.     <ul>
  47.       <li>1</li>
  48.       <li>2</li>
  49.       <li>3</li>
  50.       <li>4</li>
  51. 	  <li>5</li>
  52.       <li>6</li>
  53. 	  <li>7</li>
  54.       <li>8</li>
  55. 	  <li>9</li>
  56.       <li>10</li>
  57.     </ul>
  58.  
  59.   </div>
  60.   </div>  <div id="strzalka"></div>
  61.   <br> 
  62.   <button id="button"  >Rozpocznij losowanie</button><br/><br/><br/><br/>
  63.  
  64.  
  65.   <script>
  66.     $(document).ready(function(){
  67.       $("ul > li:lt(5)").clone().appendTo("ul")
  68.       $("ul").css({height: ($("ul > li").length * 100)})
  69.       $("#button").click(function(){
  70.         if($(this).text()==="Rozpocznij losowanie"){
  71.           stop = false
  72.           $(this).text("Zatrzymaj losowanie");
  73.           $("#result").empty();
  74. 		            $("#textDiv").empty();
  75.           scroll()
  76.         }
  77.         else {
  78.           stop = true
  79.           $(this).text("Rozpocznij losowanie");
  80.  
  81.         }
  82.       });
  83.     });
  84.     var stop = false;
  85.     var speed = 40
  86.     function scroll() {
  87.       count = parseInt($("ul > li").first().css("left"))
  88.       if(count < 0){ count = count / -100;}
  89.       if(stop){show(count); return false;}
  90.       if(count === ($("ul > li").length - 10)){count =0; $("ul > li").css({left: "0px"});}
  91.  
  92.       $("ul > li").slice(1).animate({left:"-"+((count+1)*100)+"px"}, speed, "linear");
  93.       $("ul > li").first().animate({left:"-"+((count+1)*100)+"px"}, speed, "linear", function(){scroll();} );
  94.     }
  95.     function show(count){
  96.       count = count + 3;
  97.       $("ul > li").slice(count,(count+1)).clone().css({left: "0px"}).appendTo("#result");
  98.  
  99.  
  100.     }
  101.  
  102.  
  103.  
  104.  
  105.   </script>
  106.  <div id="result"></div> 
  107.  
  108.  
  109.  
  110.  
  111.  
  112. </body>
  113. </html>
  114.  
[HTML] pobierz, plaintext


Czy znalazłby się ktoś dobry i pomógł mi zrobić to, aby losowanie było od góry w dół questionmark.gif sadsmiley02.gif
Go to the top of the page
+Quote Post
rad11
post 22.06.2015, 13:13:39
Post #2





Grupa: Zarejestrowani
Postów: 1 270
Pomógł: 184
Dołączył: 7.10.2012
Skąd: Warszawa

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

A probowales w animacji kombinacji zmiany z left na np top lub bottom?oraz funkcji random?
http://www.w3schools.com/jsref/jsref_random.asp

Ten post edytował rad11 22.06.2015, 13:19:22
Go to the top of the page
+Quote Post
fate
post 22.06.2015, 13:19:23
Post #3





Grupa: Zarejestrowani
Postów: 824
Pomógł: 106
Dołączył: 14.03.2012
Skąd: Warszawa

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

http://jsfiddle.net/1sqvpb94/1/


--------------------
Sklep ubrania lniane dla dzieci promocje
Go to the top of the page
+Quote Post
mfernal010
post 25.06.2015, 19:16:42
Post #4





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 22.06.2015

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

Cytat(fate @ 22.06.2015, 14:19:23 ) *
http://jsfiddle.net/1sqvpb94/1/

Super dzięki arrowheadsmiley.png, nie pomyślałem o tym by zrobić transform.

Mam pytanie jeszcze ponieważ teraz borykam się z problemem drugim.
Chce wysłać daną liczbę do skryptu PHP.

Używam aktualnie tak:
[PHP] pobierz, plaintext 
  1. var hr = new XMLHttpRequest();
  2. var url = "zapisz.php";
  3. var vars = "pierwszy=" +(count+2)+ "&drugi=test";
  4. hr.open("POST", url, true);
  5. hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  6. hr.onreadystatechange = function() {
  7.     console.log(hr);
  8.  
  9.     if(hr.readyState == 4 && hr.status == 200) {
  10.         var return_data = hr.responseText;
  11.         document.getElementById("status").innerHTML = return_data;
  12.     }
  13. }
  14.  
  15. hr.send(vars); 
  16. document.getElementById("status").innerHTML = "processing...";
  17.  
  18. }
[PHP] pobierz, plaintext


Lecz chodzi mi o to, aby było wszystko wysyłane przykładowo:
[PHP] pobierz, plaintext 
  1. <div id="result"><li style="left: 0px;">6</li></div>
[PHP] pobierz, plaintext

lub też tylko dana wylosowana liczba.

Nie pomoże mi nikt questionmark.gif mellow.gif

Ten post edytował mfernal010 25.06.2015, 20:29:28
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: 14.08.2025 - 00:45
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn