Smooth glide effekt

[dahwan]

Gjør dette:

Besøk denne siden: http://www.dizzler.com/music/Live/I_Alone

Trykk på "Lyrics" tabben og se hvordan den glir opp og igjen hver gang du trykker på den. Se hvor glatt den glir.

 

 

Åssen gjøres dette!? Hvis noen vet om en tutorial eller noe - supert!

 

Jeg har prøvd lenge å få de til med javascript. jeg klarer å endre størrelse på en <div> tagg med javscript, men ikke med glatt overgang.

 

Det jeg trenger er en oppsumert lett oversikt om hvordan dette gjøres / hva som skal til.

 

Takk på forhånd

[Intramin]

Jeg er ikke helt sikker, men tror at dizzler bruker script.aculo.us. Det har iallefall den funksjonaliteten.

[dahwan]

Ja... Så åssen gjør de det? Deler de målhøyden med f.eks. 100 og forstørrer høyden av div'en 100 ganger med setTimeout funksjoner eller noe slikt?

[siDDis]

Eg trur det er det som blir gjort i teorien ja.

 

Eg har brukt noko lignandes til min heimeside.

 

function changeDivHeight(from, to, div, time)
{
var counter;
var value;

if (from > to)
{
	counter = from - to;	
}
else if (to > from)
{
	counter = to - from;
}
var i = 0;
var timer = time/counter;
while(counter > 0)
{
	if (from > to)
	{
		from = from - 1;
		value = from;	
	}
	else if (to > from)
	{
		from = from + 1;
		value = from;
	}
	var newtimer = timer * i;
	setTimeout("timedChangeHeight(\""+div+"\","+value+")", newtimer);
	counter--;
	i++;
}
}
function timedChangeHeight(div, value)
{
var doc = document.getElementById(div);
doc.style.height = value+"px";
}

 

Kanskje det kan hjelpe?

[___]

Hvorfor ikke bare bruke Scriptaculous. Det er et gjennomarbeidet JavaScript-library med effekter som fungerer veldig bra i de fleste moderne browsere.

 

Effect.SlideDown() er hva du trenger.

 

Werner

[dahwan]

siDDIs

Takk, skal kikke på den.

 

wernie

Jeg liker ikke å bruke andres kode i mine programmer / websider

Endret 27. juni 2008 av dahwan

[siDDis]

Eg skreiv om den eg hadde til å bli litt meir fleksibel

 

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";
}

 

Nå kan du justere eit element med kor stort antall pixler som det skal bli større eller mindre i bredden og vidden.

 

F.eks adjustElementSizeSmoothly(100, -50, "truls", 500)

vil auke høgden med 100pixler og bredden med 50 mindre pixler

Endret 7. juli 2008 av siDDIs

[ilpostino]

wernie

Jeg liker ikke å bruke andres kode i mine programmer / websider

 

å titte på (og endre) andres kode er et godt utgangspunkt for å lære.

[dahwan]

Sant nok, men å laste ned ferdige javascript biblioteker og bruke deres funksjoner i sida mi liker jeg ikke

[___]

å titte på (og endre) andres kode er et godt utgangspunkt for å lære.

 

Det er jeg enig med deg i.

 

Grunnen til at jeg bruker f.eks. prototype.js er at antall linjer JavaScript-kode jeg skriver, blir drastisk mindre. Det blir dessuten lettere å debugge.

 

Siden jeg driver med JavaScript for det meste i jobbsammenheng, er det timer å spare på å benytte funksjonalitet som andre har skrevet og testet. Og som man vet fungerer i de fleste browsere.

 

Werner