Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][JavaScript] Losowanie liczby (animacja)
mfernal010
post
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. (IMG:style_emoticons/default/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ół (IMG:style_emoticons/default/questionmark.gif) (IMG:style_emoticons/default/sadsmiley02.gif)
Go to the top of the page
+Quote Post
rad11
post
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
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/
Go to the top of the page
+Quote Post
mfernal010
post
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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/questionmark.gif) (IMG:style_emoticons/default/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
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 23.08.2025 - 02:15
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn