Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: JS+animacja+pozycja względem diva
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
PrzeeMOC
18.04.2013, 13:22:32
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
puz219
21.04.2013, 12:15:41
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
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.