Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [js] Magnes ( przyciąganie diva )
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Jotas
17.07.2012, 09:49:48
Witam
Mam mały problem, chciałbym się dowiedzieć czy ktoś zna jakiś efekt magnesu ( chodzi o przyciąganie diva do kursora gdy ten jest w pobliżu tego diva ).
Mile widziane naprowadzenie na ten efekt w jquery jeżeli takowy istnieje. Ponieważ szukam już od kilku godzin i nie potrafię znaleźć czegoś takiego.
Pozdrawiam i z góry dziękuję za jakieś podpowiedzi.
frani0
17.07.2012, 15:11:13 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>  
  5.   #motyl{
  6.       width: 30px;
  7.       height: 30px;
  8.  
  9.       background-color: red;
  10.  
  11.       position: absolute;
  12.  
  13.       z-index: 2;
  14.   }
  15.   #poleLatania{
  16.       width: 400px;
  17.       height: 400px;
  18.  
  19.       left: 200px;
  20.       top: 200px;
  21.  
  22.       background-color: green;
  23.  
  24.       position: absolute;
  25.  
  26.       z-index: 1;
  27.   }
  28.   </style>
  29.  
  30.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  31. </head>
  32. <body>
  33. <div id="motyl"></div>
  34. <div id="poleLatania"></div>
  35. <script>
  36.     $("#poleLatania").mousemove(function(e){
  37.  
  38.       if( e.clientX > 200 && e.clientX < 600 && e.clientY > 200 && e.clientY < 600)
  39.       $('#motyl').animate({left: e.clientX,top:e.clientY }, 10);
  40.     });
  41. </script>
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


Najszybciej to tak mimo to nie wiem czy o taki efekt chodzi wink.gif
Jotas
18.07.2012, 10:54:14
Cytat(frani0 @ 17.07.2012, 16:11:13 ) *
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>  
  5.   #motyl{
  6.       width: 30px;
  7.       height: 30px;
  8.  
  9.       background-color: red;
  10.  
  11.       position: absolute;
  12.  
  13.       z-index: 2;
  14.   }
  15.   #poleLatania{
  16.       width: 400px;
  17.       height: 400px;
  18.  
  19.       left: 200px;
  20.       top: 200px;
  21.  
  22.       background-color: green;
  23.  
  24.       position: absolute;
  25.  
  26.       z-index: 1;
  27.   }
  28.   </style>
  29.  
  30.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  31. </head>
  32. <body>
  33. <div id="motyl"></div>
  34. <div id="poleLatania"></div>
  35. <script>
  36.     $("#poleLatania").mousemove(function(e){
  37.  
  38.       if( e.clientX > 200 && e.clientX < 600 && e.clientY > 200 && e.clientY < 600)
  39.       $('#motyl').animate({left: e.clientX,top:e.clientY }, 10);
  40.     });
  41. </script>
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


Najszybciej to tak mimo to nie wiem czy o taki efekt chodzi wink.gif

Wielkie dzięki, po kilku przeróbkach będzie działać tak jak chciałem. 5
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.