#5 Menü effekt - 2008. 06. 08. 5:20


Írta: Venemo, Időpont: 2008. 06. 08. 5:20, Megtekintve: 466, Hozzászólás: 1 (Szólj hozzá!)

Két aranyos JavaScript függvény, amikkel mókás megjelenítési és eltüntetési effektet lehet csinálni.
Ilyet tettem a blog menüjébe is. (Vidd az egeret az "Archívum"-ra, aztán a "Kategóriák"-ra!)

SZERK. Januárban redesign óta ezt az effektet kiszedtem. Később lehet, hogy beteszem újra.
SZERK. 2. Áprilisban visszatettem ismét. Élvezzétek! :)


var currentlyIncrementing = { };
function incrementHeight(id, maxHeight, isAutoCalled)
{
    if (isAutoCalled == false)
    {
        currentlyIncrementing[id] = true;
        currentlyDecrementing[id] = false;
    }
    if (currentlyDecrementing[id] != true)
    {
        element = document.getElementById(id);
        if (element.offsetHeight < maxHeight)
        {
            if (maxHeight - element.offsetHeight < 5)
                element.style.height = maxHeight + "px";
            else
                element.style.height = (element.offsetHeight + 5) + 'px';
            setTimeout('incrementHeight("' + id + '", ' + maxHeight + ', true)', 10);
        }
        else
            currentlyIncrementing[id] = false;
    }
}
var currentlyDecrementing = { };
function decrementHeight(id, originalHeight, isAutoCalled)
{
    if (isAutoCalled == false)
    {
        currentlyDecrementing[id] = true;
        currentlyIncrementing[id] = false;
    }
    if (currentlyIncrementing[id] != true)
    {
        element = document.getElementById(id);
        if (element.offsetHeight > originalHeight)
        {
            if (element.offsetHeight < 5)
                element.style.height = "0px";
            else
                element.style.height = (element.offsetHeight - 5) + 'px';
            setTimeout('decrementHeight("' + id + '", ' + originalHeight + ', true)', 10);
        }
        else
            currentlyDecrementing[id] = false;
    }
}

Az alapja Odené, én meg felturbóztam, hogy alkalmas legyen ilyen célra is. (Meg lehet figyelni, hogy ugyanazt az elemet soha nem növeli és csökkenti is egyszerre, tehát nem kerül így végtelen ciklusba és nem is akad össze.)

Témák: JavaScript, Webprogramozás

«Előző bejegyzés Vissza az elejére | Vissza a főoldalra Következő bejegyzés»

 

Hozzászólások

» Vissza a tetejére #1 Venemo #2008. 06. 11. 21:46:00
Majd' elfelejtettem: A függvényeket úgy kell használni, hogy megadod nekik annak a html elemnek az ID-jét, amit manipulálni akarsz, aztán pedig azt az értéket, amire változtatni szeretnéd a magasságot. Aztán egy false-t, mert te hívod a függvényt, és nem ő magát.
Például így:

decrementHeight("categories", 0, false);
Szólj hozzá!
Név:

E-mail:


(Egyébként titkos.)
Hozzászólás:
Írd be ezt a kódot: Biztonsági kód Ide:  
(Ha regisztrálsz, nem fog kelleni.)

by Venemo.net

© Venemo, 2009 | Design 2009.03.31 | Engine 2009.10.07
by Venemo.net | on HostingAbc