Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript]Losowanie javascript, jw
miras
post
Post #1





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

Witam, mam taki oto kawałek kodu, który jest "losowaniem"

[HTML] pobierz, plaintext 
  1.  
  2. 	<html>
  3. 	<head>
  4. 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
  5.  
  6. 		<style type="text/css">
  7.  
  8. 			.random-box {
  9. 				width: 400px;
  10. 				height: 200px;
  11. 				border: 1px solid #000;
  12. 				margin: 100px;
  13. 				overflow: hidden;
  14. 				position: relative;
  15. 			}
  16.  
  17. 			.random-box:before {
  18. 				height: 200px;
  19. 				width: 1px;
  20. 				background: red;
  21. 				position: absolute;
  22. 				left: 0;
  23. 				right:0;
  24. 				margin: auto;
  25. 				display: block;
  26. 				content: '';
  27. 				z-index: 999;
  28. 			}
  29.  
  30. 			.items {
  31. 				position: relative;
  32. 			}
  33.  
  34. 			.item {
  35. 				width: 150px;
  36. 				height: 150px;
  37. 				background: red;
  38. 				margin: 20px;
  39. 				float: left;
  40. 			}
  41.  
  42. 			.item.red {
  43. 				background: red;
  44. 			}
  45.  
  46. 			.item.blue {
  47. 				background: blue;
  48. 			}
  49.  
  50. 			.item.yellow {
  51. 				background: yellow;
  52. 			}
  53.  
  54. 			.item.orange {
  55. 				background: orange;
  56. 			}
  57.  
  58. 			.item.pink {
  59. 				background: pink;
  60. 			}
  61.  
  62. 			.item.brown {
  63. 				background: brown;
  64. 			}
  65.  
  66. 			.item.aqua {
  67. 				background: aqua;
  68. 			}
  69.  
  70.  
  71. 		</style>
  72.  
  73. 	</head>
  74. <body>
  75.  
  76. 	<div class="random-box">
  77. 			<div class="win"></div>
  78. 		<div class="items">
  79. 			<div class="item red"></div>
  80. 			<div class="item blue"></div>
  81. 			<div class="item yellow"></div>
  82. 			<div class="item orange"></div>
  83. 			<div class="item pink"></div>
  84. 			<div class="item brown"></div>
  85. 			<div class="item aqua"></div>
  86. 		</div>
  87. 	</div>
  88.  
  89. 	<button id="rand">Start</button>
  90.  
  91. <script>
  92.  
  93.  
  94. 	function rand(i) {
  95. 		$(".items").css("margin-left",i);
  96. 	}
  97.  
  98.  
  99.  
  100. 	$("#rand").on("click", function() {	
  101. 		var i = 0;
  102. 		var speed = 5;
  103. 		var count = $(".item").length;
  104. 		$(".items").css("width", count*190);
  105. 		var los = setInterval(function(){  
  106. 				i = i - speed;
  107.  
  108. 				if ((i*(-1))%500==0) {
  109. 					speed=speed-1;
  110. 					if (speed==0) {
  111. 						clearInterval(los);	
  112. 					}
  113. 				}
  114.  
  115.  
  116. 				if ((i*(-1))>count*160) {
  117. 					i = 260;
  118. 				}
  119.  
  120.  
  121. 				rand(i); 
  122.  
  123. 			}, 1);
  124. 	});
  125. </script>
  126. </body>
  127. </html>
[HTML] pobierz, plaintext



Wszystko działa tak, że mam div "items" i w nim boxy, które są losowane, przesuwam go zwyczajnie margin-left, natomiast pojawia się problem gdy przesunę już cały div i chciałbym wrócić do początku, wtedy ustawiam margin-left: na 0, teoretycznie działa, ale widac taki duży "przeskok / przestrzeń ". Ma ktoś pomysł jak to naprawić?

Ten post edytował miras 9.06.2016, 19:40:45
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: Przełącz na: Standardowy · 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 - 01:46
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn