Задача: Летающие, крутящиеся шарики
Исходник: Вращающие, крутящиеся вокруг курсора шарики, язык: javascript [code #124, hits: 13846]
автор: - [добавлен: 17.05.2006]
  1. <html><head>
  2. <script LANGUAGE="JavaScript">
  3.  
  4. window.onerror=null;
  5. netscape = (document.layers) ? 1:0;
  6. goodIE = (document.all) ? 1:0;
  7.  
  8. //window.onResize="history.go(0); setup()";
  9. document.onmousemove=MoveHandler;
  10. var gotthere = 0;
  11. var count = 0;
  12.  
  13. toplocation = new Array( 0,30,57,80,101,125,80,80,101,125,80,0 );
  14. temptoplocation = new Array( 50,100,100,150,150,200,200,100,150,150,200,200,0 );
  15. leftlocation = new Array( 0,292,318,181,181,217,263,318,181,181,217,263,-96 );
  16. templeftlocation = new Array( 0,0,260,390,420,550,680,390,420,550,680,0 );
  17. difftop = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
  18. diffleft = new Array( 0,0,0,0,0,0,0,0,0,0,0,0 );
  19. questtop = -13;
  20. questleft2 = -96;
  21. if (netscape) {
  22. window.captureEvents(Event.MOUSEMOVE);
  23. window.onMouseMove = MoveHandler;
  24. var layerstart = "document.";
  25. var layerleft = ".left";
  26. var layertop = ".top";
  27. var layerstyle = "";
  28. var windowWidth = window.innerWidth;
  29. var windowHeight = window.innerHeight; }
  30. else if (goodIE) {
  31. layerstart = "document.all.";
  32. layerleft = ".left";
  33. layertop = ".top";
  34. layerstyle = ".style";
  35. windowWidth=600;
  36. windowHeight=400; }
  37. // end error trapping
  38. var Ypos2 = 72;
  39. var Xpos2 = 72;
  40. function MoveHandler(e) {
  41. if (netscape || goodIE) {
  42. Xpos2 = (netscape)?e.pageX:event.x
  43. Ypos2 = (netscape)?e.pageY:event.y
  44. Xorigin = Xpos2;
  45. Yorigin = Ypos2;
  46. if (Ypos2 > windowHeight/2) {
  47. if (Xpos2 > windowWidth/2) { direction = 1;}
  48. else { direction = -1;} }
  49. else {
  50. if (Xpos2 > windowWidth/2) { direction = -1;}
  51. else { direction = 1;} }
  52. }}
  53.  
  54.  
  55.  
  56.  
  57. function startthedots() {
  58. if (goodIE) {
  59. windowWidth=document.body.clientWidth;
  60. windowHeight=document.body.clientHeight; }
  61. Xorigin = 204;
  62. Yorigin = 147;
  63. spin();run(); }
  64.  
  65.  
  66.  
  67.  
  68. var OrbitSize = 200;
  69. count=1; delay=100; direction = -1;
  70. Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
  71. Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
  72. Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67 );
  73. var speed = -0.06;
  74. var offset = 1;
  75.  
  76.  
  77.  
  78. function spin() {
  79. for ( j = 0 ; j <= 9 ; j++ ) {
  80. Count[j] = Count[j] + (speed*direction);
  81. Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset));
  82. Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j])); }
  83. setTimeout('spin()',3); }
  84.  
  85.  
  86.  
  87. function run() {
  88. count++;
  89. for ( j = 0 ; j <= 9 ; j++ ) {
  90. difftop[j] = Ypoint[j] - temptoplocation[j];
  91. diffleft[j] = Xpoint[j] - templeftlocation[j];
  92. diff = 30;
  93. temptoplocation[j] = temptoplocation[j] + difftop[j]/diff;
  94. templeftlocation[j] = templeftlocation[j] + diffleft[j]/diff;
  95. eval(layerstart+"a"+j+layerstyle+layerleft+" = templeftlocation["+j+"]");
  96. eval(layerstart+"a"+j+layerstyle+layertop+" = temptoplocation["+j+"]"); }
  97. setTimeout('run()', 25) }
  98.  
  99.  
  100.  
  101.  
  102.  
  103. //-- end script -->
  104. </script>
  105.  
  106. <style TYPE="text/css">
  107. <!--
  108. #a0 {position:absolute; left:-24; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  109. #a1 {position:absolute; left:96; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  110. #a2 {position:absolute; left:216; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  111. #a3 {position:absolute; left:338; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  112. #a4 {position:absolute; left:460; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  113. #a5 {position:absolute; left:640; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  114. #a6 {position:absolute; left:-24; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  115. #a7 {position:absolute; left:200; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  116. #a8 {position:absolute; left:300; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  117. #a9 {position:absolute; left:600; top:-24; width:9; height:9;clip:rect(0 9 9 0);z-index:2000;}
  118.  
  119.  
  120.  
  121. // -->
  122. </style>
  123. </head>
  124. <body onLoad="startthedots();">
  125.  
  126. <DIV ID="a0" align=center><img src="spot.gif" height=9 width=9></DIV>
  127. <DIV ID="a1" align=center><img src="spot.gif" height=9 width=9></DIV>
  128. <DIV ID="a2" align=center><img src="spot.gif" height=9 width=9></DIV>
  129. <DIV ID="a3" align=center><img src="spot.gif" height=9 width=9></DIV>
  130. <DIV ID="a4" align=center><img src="spot.gif" height=9 width=9></DIV>
  131. <DIV ID="a5" align=center><img src="spot.gif" height=9 width=9></DIV>
  132. <DIV ID="a6" align=center><img src="spot.gif" height=9 width=9></DIV>
  133. <DIV ID="a7" align=center><img src="spot.gif" height=9 width=9></DIV>
  134. <DIV ID="a8" align=center><img src="spot.gif" height=9 width=9></DIV>
  135. <DIV ID="a9" align=center><img src="spot.gif" height=9 width=9></DIV>
  136. 1<br>
  137. 1<br>
  138. 1<br>
  139. 1<br>
  140. 1<br>
  141. 1<br>
  142. 1<br>
  143. 1<br>
  144. 1<br>
  145. 1<br>
  146. 1<br>
  147. 1<br>
  148. 1<br>
  149. 1<br>
  150. 1<br>
  151. 1<br>
  152. 1<br>
  153. 1<br>
  154. 1<br>
  155. 1<br>
  156. 1<br>
  157. 1<br>
  158. 1<br>
  159. 1<br>
  160. 1<br>
  161. 1<br>
  162. 1<br>
  163. 1<br>
  164. 1<br>
  165. 1<br>
  166. 1<br>
  167. 1<br>
  168. 1<br>
  169. 1<br>
  170. 1<br>
  171. 1<br>
  172. </body>
  173. </html>
Забавный скрипт запускающий вращающиеся шарики вокруг курсора мыши, работающий во всех современных браузерах.
При этом динамически в зависимости от резкости перемещения курсора - меняется диаметр вращения этих шариков.
С этим файлом должна лежать еще и картинка spot.gif.
Найдете ее в <a href="/data/tasks/55/File/spots.rar" class=link>архиве(~4кб)</a> вместе и с этим файлом.

Найдено на http://sources.ru/jscript/
Тестировалось на: IE 6.0 SP2, Mozilla FF 1.5, Opera 8.5

+добавить реализацию