JavaScript:AdjustElementSizeSmoothly

Fra CodeWiki

Gå til: navigasjon, søk

Dette skriptet kan justere et elements størrelse med 'glide' effekt.

Det brukes med å kalle på denne funksjonen: 

adjustElementSizeSmoothly(200, 100, "trulsdiven", 500);

Denne funksjonen vil øke størrelsen på en div som heter trulsdiven med 200 pixler i høyden og 100 pixler i vidden, dette vil skje i løpet av 500 millisekunder. 

function adjustElementSizeSmoothly(height, width, div, time)
{
	var currentHeight = document.getElementById(div).offsetHeight;
	var currentWidth = document.getElementById(div).offsetWidth;
	var newHeight = currentHeight + height;
	var newWidth = currentWidth + width;
	if (height < 0)
	{
		height = height * (-1);
	}
	if (width < 0)
	{
		width = width * (-1);
	}
	var timerHeight = time/height;
	var timerWidth = time/width;
	var loopCounterHeight = 0;
	while(height > 0)
	{
		if (newHeight > currentHeight)
		{
			currentHeight = currentHeight + 1;
		}
		else if (currentHeight > newHeight)
		{
			currentHeight = currentHeight - 1;
		}
		var newtimer = timerHeight * loopCounterHeight;
		setTimeout("ChangeHeight(\""+div+"\","+currentHeight+")", newtimer);
		height--;
		loopCounterHeight++;
	}
	var loopCounterWidth = 0;
	while(width > 0)
	{
		if (newWidth > currentWidth)
		{
			currentWidth = currentWidth + 1;
		}
		else if (currentWidth > newWidth)
		{
			currentWidth = currentWidth - 1;
		}
		var newtimer = timerWidth * loopCounterWidth;
		setTimeout("ChangeWidth(\""+div+"\","+currentWidth+")", newtimer);
		width--;
		loopCounterWidth++;
	}
}
function ChangeHeight(div, value)
{
	document.getElementById(div).style.height = value+"px";
}
function ChangeWidth(div, value)
{
	document.getElementById(div).style.width = value+"px";
}
Hentet fra «http://www.codewiki.no/index.php/JavaScript:AdjustElementSizeSmoothly»
Personlige verktøy
dataprogrammering
generelt