Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Zmiana rozmiaru div-a - problem
dag1980
post
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

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


Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
dag1980
post
Post #2





Grupa: Zarejestrowani
Postów: 10
Pomógł: 0
Dołączył: 21.07.2009

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

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
Go to the top of the page
+Quote Post

Posty w temacie
- dag1980   Zmiana rozmiaru div-a - problem   27.01.2010, 11:43:35
- - karolrynio   Jak zwiększasz szerokość diva to dodaj mu ujemny m...   27.01.2010, 14:49:52
- - skowron-line   Sprawdź sobie taki kod. [HTML] pobierz, plaintext ...   27.01.2010, 16:45:04
- - dag1980   Skopiowałem ten kod, wstawiłem w odpowiednie miejs...   28.01.2010, 07:49:47
|- - skowron-line   Cytat(dag1980 @ 28.01.2010, 07:49:47 ...   28.01.2010, 09:22:55
- - dag1980   Racja, zapomniałem o tym by sprawdzić to w konsoli...   28.01.2010, 22:58:48
- - skowron-line   [JAVASCRIPT] pobierz, plaintext window.addEvent...   29.01.2010, 10:21:23
- - dag1980   Elegancko, dzięki za pomoc.   2.02.2010, 09:27:47

« Następny starszy · XML, AJAX · 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 · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 7.10.2025 - 10:31
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn