Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zmiana rozmiaru div-a - problem
Forum PHP.pl > Forum > XML, AJAX
dag1980
27.01.2010, 11:43:35
Nie mam pojęcia jak zrobić aby po najechaniu na diva powiększał on się ale równomiernie na prawo i lewo a nie jak do tej pory na prawo.
Ktoś może pomóc.

Korzystam z biblioteki mootols

Strona

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<title></title>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. 	<script type="text/javascript" src="mootools.js"></script>
  8. 	<script type="text/javascript" src="mootools-2.js"></script>
  9. 	<link rel="stylesheet" type="text/css" href="style-2.css" />
  10.  
  11.  
  12. </head>
  13. <body>
  14. <ul id="menu">
  15. 	<li><div class="el" >asa</div></li>
  16. 	<li><div class="el">asa</div></li>
  17. 	<li><div class="el">asa</div></li>
  18. 	<li><div class="el">asa</div></li>
  19.  
  20. </ul>
  21.  
  22.  
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext



style.css

[HTML] pobierz, plaintext 
  1. div#content{
  2. 	padding-bottom: 100px;
  3. }
  4.  
  5. ul#menu{
  6. 	list-style-type: none;
  7. }
  8.  
  9. ul#menu  li{
  10. 	padding: 5px;
  11. 	text-align: center;
  12. 	display: block;
  13. 	float: left;
  14. 	width: 128px;
  15. 	height: 128px;
  16. }
  17.  
  18. ul#menu  li img{
  19. 	width: 48px;
  20. 	height: 48px;
  21. 	border: 0px;
  22. }
  23.  
  24. ul#menu li a{
  25. 	color: #000;
  26. 	font-weight: bold;
  27. 	font-size: 24px;
  28. 	font-family: "Trebuchet MS";
  29. 	text-decoration: none;
  30. }
  31.  
  32. div.el {
  33. 		width:48px; height: 48px;
  34. 		background-color:#00FF66;
  35. }
[HTML] pobierz, plaintext


karolrynio
27.01.2010, 14:49:52
Jak zwiększasz szerokość diva to dodaj mu ujemny margines, żeby było równomiernie możesz margines obliczyc wedlug wzoru: margines = (obecna szerokosc - domyslna szerokosc) / 2
skowron-line
27.01.2010, 16:45:04
Sprawdź sobie taki kod.
[HTML] pobierz, plaintext 
  1. <div id="a" style="width:100;height:100;background-color:pink;margin-left:300px; margin-top:200"></div>
[HTML] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
  1. window.addEvent( 'domready', function(){
  2.     var m = new Fx.Morph( $('a'), {duration: 'long'});
  3.         m.start({
  4.             'width': [100, 400],
  5.             'height':[100, 500],
  6.             'margin-left': [ $('a').getStyle( 'margin-left'), 200 ],
  7.             'margin-top': [ $('a').getStyle('margin-left'), 200 ]
  8.         });
  9. })
[JAVASCRIPT] pobierz, plaintext

Dokładnie to co napisał kolega wyżej ale w przełożeniu na mootools -a
dag1980
28.01.2010, 07:49:47
Skopiowałem ten kod, wstawiłem w odpowiednie miejsca i nic się nie dzieje, oprócz tego że wyświetla mi się purpurowy kwadrat ...
skowron-line
28.01.2010, 09:22:55
Cytat(dag1980 @ 28.01.2010, 07:49:47 ) *
Skopiowałem ten kod, wstawiłem w odpowiednie miejsca i nic się nie dzieje, oprócz tego że wyświetla mi się purpurowy kwadrat ...


I pewnie nie sprawdziłeś w konsoli błędów co jest nie tak
http://skowronline.pl/a/ wrzuciłem do siebie podejrzyj źródło i wszystko stanie się jasne.
dag1980
28.01.2010, 22:58:48
Racja, zapomniałem o tym by sprawdzić to w konsoli, ale ok, teraz działa.
Chcąc iść dalej próbowałem wywołać powiększanie i pomniejszenie elementu po najechaniu i zjechaniu z niego kursorem myszy,
udało się ale nie do końca, na początku widoczny jest lekki skok, i drugi problem to taki że nieraz efekt równomiernego powiększania nie działa.
Problem ten występuje wtedy kiedy przed zakończeniem animacji zjedziemy kursorem z obiektu .

Przykład

A tu kod

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <META HTTP-EQUIV="Pragma" CONTENT="no-cache"; charset="windows-1250">
  4. <script type="text/javascript" src="a_pliki/mootools-1.2.4-core-nc.js"></script>
  5. <script type="text/javascript" src="a_pliki/mootools-1.2.4.2-more.js"></script>
  6. <script type="text/javascript">
  7. window.addEvent( 'domready', function(){
  8.  
  9.     var m = new Fx.Morph( $('a'), {duration: 'long', fps: 50 });
  10.  
  11. 	$('a').addEvents({'mouseenter': function(){
  12.         m.start({
  13.             'width': [100, 400],
  14.             'height': [100, 500],
  15.             'margin-left': [ $('a').getStyle( 'margin-left'), 200 ],
  16.             'margin-top': [ $('a').getStyle('margin-left'), 200 ]
  17.         });
  18. 	}});
  19.  
  20. 	$('a').addEvents({'mouseleave': function(){
  21.         m.start({
  22.             'width': [400, 100],
  23.             'height': [500, 100],
  24.             'margin-left': [ $('a').getStyle( 'margin-left'), 300 ],
  25.             'margin-top': [ $('a').getStyle('margin-left'), 300 ]
  26.         });
  27. 	}});
  28.  
  29.  
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <div id="a" style="width:100px;height:100px;background-color:pink;margin-left:300px; margin-top:200px"></div>
  35.  
  36. </body>
  37. </html>
  38.  
[HTML] pobierz, plaintext
skowron-line
29.01.2010, 10:21:23 
[JAVASCRIPT] pobierz, plaintext 
  1. window.addEvent( 'domready', function(){
  2.     var m = new Fx.Morph( $('a'), {duration: 'long', fps: 50 });
  3.     var size = $H( $('a').getStyles('width','height', 'margin-left', 'margin-top'));
  4.  
  5.     $('a').addEvents({
  6.         'mouseenter': function(){
  7.             m.cancel();
  8.             m.start({
  9.                 'width': [ size.width, 400 ],
  10.                 'height': [ size.height, 400 ],
  11.                 'margin-left': [ size.get('margin-left'), '-200' ],
  12.                 'margin-top': [ size.get('margin-top'), '-200' ]
  13.             });
  14.         },
  15.         'mouseleave': function(){
  16.             m.cancel();
  17.             m.start({
  18.                 'width': [ 400, size.width ],
  19.                 'height': [ 400, size.height ],
  20.                 'margin-left': [ '-200', size.get('margin-left') ],
  21.                 'margin-top': [ '-200', size.get('margin-top') ]
  22.             });
  23.         }
  24.     });
  25. });
[JAVASCRIPT] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. .divs {
  2.     width:200px;
  3.     height:200px;
  4.     position:absolute;
  5.     left:50%;
  6.     top:50%;
  7.     background-color: silver;
  8.     margin-top: -100px;
  9.     margin-left: -100px;
  10. }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <div id="a" class="divs"></div>
[HTML] pobierz, plaintext


Zwróć uwagę na to że kiedy zjedziesz z elementu przed końcem animacji to będzie przeskok wielkości i zmniejszenie, nie jest błąd jest to spowodowane tym że na sztywno są ustawione wartości dla width i height. Dla płynnego rozszerzania i zmniejszania potrzebne jest policzenie przyrostu wartości width i height tak by było wiadomo do ilu przyrosło przed zjechaniem / wjechaniem myszki z / na element.

EDIT:

Żeby nie było przeskoku, należy nie podawać wartości początkowej animacji.

[JAVASCRIPT] pobierz, plaintext 
  1. window.addEvent( 'domready', function(){
  2.     var m = new Fx.Morph( $('a'), {duration: 'long', fps: 50 });
  3.     var size = $H( $('a').getStyles('width','height', 'margin-left', 'margin-top'));
  4.     $('a').addEvents({
  5.         'mouseenter': function(){
  6.             m.cancel();
  7.             m.start({
  8.                 'width': 400,
  9.                 'height': 400,
  10.                 'margin-left':  '-200' ,
  11.                 'margin-top': '-200' 
  12.             });
  13.         },
  14.         'mouseleave': function(){
  15.             m.cancel();
  16.             m.start({
  17.                 'width': size.width,
  18.                 'height': size.height ,
  19.                 'margin-left': size.get('margin-left'),
  20.                 'margin-top': size.get('margin-top')
  21.             });
  22.         }
  23.     });
  24. });
[JAVASCRIPT] pobierz, plaintext


http://skowronline.pl/a/
dag1980
2.02.2010, 09:27:47
Elegancko, dzięki za pomoc.
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.