proporcjonalnie skalowany div (javascript)

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
darek_w
Nowy
Nowy
Posty: 41
Rejestracja: sob lip 31, 2010 8:48 am

proporcjonalnie skalowany div (javascript)

Post autor: darek_w »

Witam.
Chodzi o to że nie mogę wymyśleć w jaki sposób skalować proporcjonalnie diva, tzn teraz skaluje mi się i owszem ale punkt skalowania zaczepiony jest w górnym rogu kwadratu. Co należy zmienić aby punkt ten znajdowal się w środku diva - w moim przypadku id="box2". Z góry dziękuje za odpowiedź. Darek

Kod:

Kod: Zaznacz cały

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    	#box1{
	    width: 200px;
	    height: 200px;
	    position: absolute;
	    top: 200px;
	    left: 300px;
	    background-color: #ccc;
	    }
		#box2{
	    width: 50px;
	    height: 50px;
	    position: relative;
		top: -25px;
		left: -25px;
	    background-color: #f00;
	    }
    </style>
  </head>
<body>
<div id="box1"><div id="box2"></div></div>
<script type="text/javascript">
zmienna=50;
function m_box2(){
	var box2=document.getElementById("box2");
	
	if (zmienna == 50) kierunek = 0;
	if (zmienna == 150) kierunek = 1;
	if (kierunek == 0) zmienna++;
	else 
	zmienna--;
	
	box2.style.width = (zmienna +"px");
	box2.style.height = (zmienna +"px");
	//kwadrat.innerHTML = zmienna;
	//alert('zmienna:'+zmienna);
}
setInterval("m_box2();", 35);
</script>
</body>
</html>
ODPOWIEDZ