Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> JS+animacja+pozycja względem diva
PrzeeMOC
post
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 18.04.2013

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

WItam wszystkich!
Zazwyczaj nie piszę, tylko szukam do skutku, ale chyba nie tym razem closedeyes.gif

Chciałem zrobić prostą animację "celownika". Pozioma i pionowa linia (divy) najeżdżają spoza strony, tak by ich punkt przecięcia znalazł się w odpowiednim miejscu. Realizuję to przez zmianę pozycji margin w JS.
Problem pojawia się taki, że linie mają przecinać całą stroną, więc pozioma ma mieć szerokość względem body 100%, a pionowa wysokość 100%, jednak punkt ich przecięcia ma być względem diva z logo, a ten na różnych rozdzielczościach będzie miał różną wartość margin-left. Nie mogę ruszać tymi liniami poziomu diva body, bo nie dam rady przeciąć ich w odpowiednim miejscu gdy szerokość strony będzie różna. Nie dam rady także ich uruchomić z poziomu diva z logo, bo długość (pionowej) i szerokość (poziomej) dostosują się tylko do wielkości diva z logo, a ja potrzebuję, żeby za niego wychodziły.
Nie wiem czy dobrze wytłumaczyłem. Zamieszczam fragmenty kodu. Problem by znikł gdybym wiedział jak zrobić tak, żeby te linie mogły mieć rozmiary większe od kontenera w którym się znajdują lub gdyby ich pozycja margin mogła być ustalana względem innego diva niż ten w którym się znajdują.

JS:
[HTML] pobierz, plaintext 
  1.  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  2.     <script type="text/javascript">//!window.jQuery && document.write('<script src="jquery.min.js"><\/script>')
  3.     $(window).load(function(){
  4.         $(document).ready(function(){
  5.  
  6.  
  7.                 $('.x_linia').delay("1000").animate({ 
  8.                     marginTop: "61px"
  9.                 }, 1000 );; ;
  10.  
  11.                 $('.y_linia').delay("1000").animate({ 
  12.                     marginLeft: "59px"
  13.                 }, 1000 );; ;
  14.          });         
  15.  
  16.     });
  17.  
  18.     </script>
[HTML] pobierz, plaintext


HTML:
[HTML] pobierz, plaintext 
  1.     <body>      
  2.         <div id="content">           
  3.             <div id="logo">
  4.                      <div class="x_linia"></div>
  5.                     <div class="y_linia"></div>                    
  6.             </div>
  7.          <article></article>   
  8.         </div>
  9.             <footer>
  10.  
  11.             </footer>
  12.         </div>
  13.  
  14.  
  15.         </body>
  16. </html>        
[HTML] pobierz, plaintext



CSS:
[HTML] pobierz, plaintext 
  1. #content
  2. {
  3.     position:relative;
  4.     width:1100px;
  5.     min-height:900px;
  6.     padding-top:20px;
  7. }
  8.  
  9. #logo
  10. {
  11.     background:url('../images/logo.png');
  12.     width:362px;
  13.     height:95px;
  14.     margin-left:200px;
  15.     position: relative;
  16.  
  17. }
  18.  
  19. .x_linia, .y_linia
  20. {
  21. 	position: absolute;
  22. 	background:#000;
  23. 	  z-index:100;
  24.  
  25.  
  26. }
  27.  
  28. .x_linia
  29. {
  30.     height:1px;
  31.     width:2000px;
  32.     margin-top:-100px;
  33.     margin-left:0px;    
  34.  
  35. }
  36.  
  37. .y_linia
  38. {
  39.     width:1px;
  40.     height:2000px;
  41.     overflow:hidden;
  42.     margin-left:-500px;
  43.     margin-top:0px;        
  44.  
  45. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
puz219
post
Post #2





Grupa: Zarejestrowani
Postów: 201
Pomógł: 0
Dołączył: 1.07.2007

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

Aby linie wchodziły poza diva zarówno #content jak i #logo musisz usunąć position: relative, a żeby linie przecięły się w odpowiednim miejscu proponuję określić dany punkt według całej strony - można się przy tym posłużyć położeniem diva #logo [offset()] po czym ustawić linie w danym położeniu za pomocą wartości left i top

Ten post edytował puz219 21.04.2013, 12:16:15
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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: 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: 19.08.2025 - 09:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn