WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY

Text - postupně se menící
Normální položka
Zobrazeno: 5983

Popis: Perfektně vlnící se text.
Funkčnost: Funkční v IE 5.5 a vyšší
Hodnocení: *****
Ukázka

Následující kód si vložte mezi tagy <HEAD> a </HEAD>.

<script language="JavaScript">
<!--
var text = "Cheater.cz - nejlepší český databázový program";
var msg = "<span style='font-size: 25px; visibility: hidden;'>.</span>";

function animace(index)
{
        for (i = 0; i < text.length; i++)
        {
                if (index == (i - 3))
                {
                        msg += "<span style='font-size: 16px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                } else if (index == (i - 2))
                {
                        msg += "<span style='font-size: 20px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                } else if (index == (i - 1))
                {
                        msg += "<span style='font-size: 23px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                }else if (index == i)
                {
                        msg += "<span style='font-size: 25px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                } else if (index == (i + 1))
                {
                        msg += "<span style='font-size: 23px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                } else if (index == (i + 2))
                {
                        msg += "<span style='font-size: 20px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                } else if (index == (i + 3))
                {
                        msg += "<span style='font-size: 16px; color: #F76B08;'>" + text.charAt(i) + "</span>";
                } else
                {
                        msg += "<span style='font-size: 12px;'>" + text.charAt(i) + "</span>";
                }
        }
        anim.innerHTML = msg;
        msg = "<span style='font-size: 25px; visibility: hidden;'>.</span>";
        if (index >= text.length)
        {
                index = 0;
        } else
        {
                index++;
        }
        window.setTimeout("animace(" + index + ")", 100);
}
// -->
</script>

Následující kód si vložte do tagu <BODY>.

OnLoad="animace(0);"

Následující kód si vložte mezi tagy <BODY> a </BODY>.

<div id="anim" style="font-family: Verdana; font-weight: bold;"></div>