Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [js] wleczenie się za / gonieie kursora ze spowolnieniem
23kulpamens
post 20.11.2007, 15:25:07
Post #1





Grupa: Zarejestrowani
Postów: 57
Pomógł: 1
Dołączył: 11.10.2007

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

Chcę uzyskać efekt spowolnienia przemiszczania się bloku za kursorem. Brakuje w JavaScript funkcji delay, więc użyłem setInterval i setTimeout, ale nie dają podążanego efektu. Kiedy zmienna DELAY osiągnie "0", blok nie pdąża płynnie za kursorem i nawet na początki nie widać przyspieszenia tylko blok podąża cały czas z tą samą prędkością. Próbowałem kilku sposobów, zaimplementowałem nawet własną funkcję pause(), ale nic nie działało. To jest najbliższe pożądanemu: 

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript">
  6. var IE = document.all?true:false
  7. var tempX = 0
  8. var tempY = 0
  9. var XX = 0
  10. var YY = 0
  11. var YYY = 0
  12. var DELAY = 100;
  13.  
  14. function update(){
  15.     if ( tempX > XX ){XX++;}else if( tempX < XX ){XX--;}
  16.     if ( tempY > YY ){YY++;}else if( tempY < YY ){YY--;}
  17.       document.getElementById('xxx').value = "X:" + XX;
  18.       document.getElementById('yyy').value = "Y:" + YY;
  19.       document.getElementById('blok').style.width = XX + "px";
  20.       document.getElementById('blok').style.height = YY + "px";
  21.       document.getElementById('blok').style.left = XX + "px";
  22.       document.getElementById('blok').style.top = YY + "px";
  23.       window.YYY = document.getElementById('xxx').value.toString();
  24.       document.getElementById('info1').value = "D" + DELAY;
  25.       document.getElementById('info2').value = tempX;
  26.  
  27.       if(DELAY > 0){ DELAY--;}
  28.     }
  29.  
  30. function checker(){
  31.     if( tempX != XX || tempY != YY){
  32.         setTimeout("update()", DELAY);
  33.     }
  34.     else{
  35.     DELAY = 100;
  36.     }
  37. }
  38.  
  39. function getMouseXY(e) {
  40.   if (window.IE) { // grab the x-y pos.s if browser is IE
  41.     tempX = event.clientX + document.body.scrollLeft
  42.     tempY = event.clientY + document.body.scrollTop
  43.   } else {  // grab the x-y pos.s if browser is NS
  44.     tempX = e.pageX
  45.     tempY = e.pageY
  46.   }  
  47.   // catch possible negative values in NS4
  48.   if (tempX < 0){tempX = 0}
  49.   if (tempY < 0){tempY = 0}
  50.   return true
  51. }
  52.  
  53. function count(){
  54.     setInterval("checker()", 1);
  55.     if (!IE) document.captureEvents(Event.MOUSEMOVE)
  56.     document.onmousemove = getMouseXY;
  57. }
  58.  
  59.  
  60. </script>
  61. </head>
  62. <body>
  63. <div id="blok" style="background-color: aqua; width: 500px; position: absolute; t">
  64. <input id="xxx" name="strength" value="" />
  65. <input id="yyy" name="strength" value="" />
  66. </div>
  67. <input id="info1" name="strength" value="" />
  68. <input id="info2" name="strength" value="" />
  69. <script type="text/javascript">count();</script>
  70. </body>
  71. </html>
[HTML] pobierz, plaintext


Czy ktoś miałby pomysł jak to zrobić questionmark.gif

Ten post edytował 23kulpamens 20.11.2007, 15:28:00


--------------------
Ta sygnaturka to lekkie przegięcie. To poważne forum. Pomijam już fakt naruszenia regulaminu. Usuwam /~nospor/ szkoda :(
Go to the top of the page
+Quote Post
nospor
post 20.11.2007, 15:36:48
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <script type="text/javascript">
  6. var IE = document.all?true:false
  7. var tempX = 0
  8. var tempY = 0
  9. var XX = 0
  10. var YY = 0
  11. var YYY = 0
  12. var DELAY = 100;
  13.  
  14. function update(){
  15. if ( tempX > XX ){XX++;}else if( tempX < XX ){XX--;}
  16. if ( tempY > YY ){YY++;}else if( tempY < YY ){YY--;}
  17. document.getElementById('xxx').value = "X:" + XX;
  18. document.getElementById('yyy').value = "Y:" + YY;
  19. document.getElementById('blok').style.width = XX + "px";
  20. document.getElementById('blok').style.height = YY + "px";
  21. document.getElementById('blok').style.left = XX + "px";
  22. document.getElementById('blok').style.top = YY + "px";
  23. window.YYY = document.getElementById('xxx').value.toString();
  24. document.getElementById('info1').value = "D" + DELAY;
  25. document.getElementById('info2').value = tempX;
  26. checker();
  27. if(DELAY > 0){ DELAY--;}
  28. }
  29.  
  30. function checker(){
  31. setTimeout("update()", DELAY);
  32. if( tempX != XX || tempY != YY){
  33.  
  34. }
  35. else{
  36. DELAY = 100;
  37. }
  38. }
  39.  
  40. function getMouseXY(e) {
  41. if (window.IE) { // grab the x-y pos.s if browser is IE
  42. tempX = event.clientX + document.body.scrollLeft
  43. tempY = event.clientY + document.body.scrollTop
  44. } else { // grab the x-y pos.s if browser is NS
  45. tempX = e.pageX
  46. tempY = e.pageY
  47. }
  48. // catch possible negative values in NS4
  49. if (tempX < 0){tempX = 0}
  50. if (tempY < 0){tempY = 0}
  51. return true
  52. }
  53.  
  54. function count(){
  55. //setInterval("checker()", 1);
  56. checker();
  57. if (!IE) document.captureEvents(Event.MOUSEMOVE)
  58. document.onmousemove = getMouseXY;
  59. }
  60.  
  61.  
  62. </script>
  63. </head>
  64. <body>
  65. <div id="blok" style="background-color: aqua; width: 500px; position: absolute; t">
  66. <input id="xxx" name="strength" value="" />
  67. <input id="yyy" name="strength" value="" />
  68. </div>
  69. <input id="info1" name="strength" value="" />
  70. <input id="info2" name="strength" value="" />
  71. <script type="text/javascript">count();</script>
  72. </body>
  73. </html>
[HTML] pobierz, plaintext


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
23kulpamens
post 22.11.2007, 17:00:03
Post #3





Grupa: Zarejestrowani
Postów: 57
Pomógł: 1
Dołączył: 11.10.2007

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

Dzięki, przydało się winksmiley.jpg


--------------------
Ta sygnaturka to lekkie przegięcie. To poważne forum. Pomijam już fakt naruszenia regulaminu. Usuwam /~nospor/ szkoda :(
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 - 11:37
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn