Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] wleczenie się za / gonieie kursora ze spowolnieniem
Forum PHP.pl > Forum > Przedszkole
23kulpamens
20.11.2007, 15:25:07
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
nospor
20.11.2007, 15:36:48 
[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
23kulpamens
22.11.2007, 17:00:03
Dzięki, przydało się winksmiley.jpg
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.