Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [js] Magnes ( przyciąganie diva )
Jotas
post
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 20.09.2011

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
frani0
post
Post #2





Grupa: Zarejestrowani
Postów: 43
Pomógł: 5
Dołączył: 9.03.2011

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

[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 (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
Jotas
post
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 20.09.2011

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

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 (IMG:style_emoticons/default/wink.gif)

Wielkie dzięki, po kilku przeróbkach będzie działać tak jak chciałem. 5
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 24.08.2025 - 12:00
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn