Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][JavaScript] Losowanie liczby (animacja)
Forum PHP.pl > Forum > Przedszkole
mfernal010
22.06.2015, 12:50:16
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
rad11
22.06.2015, 13:13:39
A probowales w animacji kombinacji zmiany z left na np top lub bottom?oraz funkcji random?
http://www.w3schools.com/jsref/jsref_random.asp
fate
22.06.2015, 13:19:23
http://jsfiddle.net/1sqvpb94/1/
mfernal010
25.06.2015, 19:16:42
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
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.