Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Мет.указание_Web-программирование_ПОАС.doc
Скачиваний:
66
Добавлен:
26.02.2016
Размер:
548.86 Кб
Скачать

11.4. Волнообразнодвижущийся текст

Эффект 1

Анимация текстовой надписи, выглядящей как волнообразное движение

<html lang="ru">

<head>

<title>Анимационные эффекты | Волнообразно движущийся текст, эффект 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta http-equiv="Content-Language" content="ru">

<style type="text/css">

<!--

BODY

{

background : white;

}

TABLE

{

width : 100%;

height : 100%;

}

#ID_ANIMATE

{

color : black;

white-space : nowrap;

font : normal 0px "Times New Roman", serif;

}

-->

</style>

</head>

<body>

<TABLE>

<TR>

<TD align="center" valign="middle"><span ID="ID_ANIMATE"></span></TD>

</TR>

</TABLE>

<script type="text/javascript">

<!--

var nPeriod = 2; // количество периодов синусоиды

var nMaxSize = 64; // максимальный размер шрифта

var nMinSize = 12; // минимальный размер шрифта

var strText = "Волнообразно движущийся текст"; // текст надписи

// --

var fPhase = 0.0;

var aoChars = new Array();

var nSteps = strText.length;

var fStep = 2 * Math.PI * nPeriod / nSteps;

var nDy = (nMaxSize + nMinSize) / 2;

var nAmp = (nMaxSize - nMinSize) / 2;

// --

function OnTimer()

{

for(var i = 0; i < nSteps; i++)

{

var nSize = Math.ceil(Math.sin(fStep * i + fPhase) * nAmp + nDy);

aoChars[i].style.fontSize = nSize.toString(10) + "px";

}

fPhase += fStep;

}

// --

for(var i = 0; i < nSteps; i++)

{

var oSpan = document.createElement("SPAN");

oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));

document.getElementById("ID_ANIMATE").appendChild(oSpan);

aoChars[i] = oSpan;

}

// --

OnTimer();

window.setInterval(OnTimer, 100);

// -->

</script>

<noscript>

Внимание ! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.

</noscript>

</body>

</html>

Эффект 2

<html lang="ru">

<head>

<title>Анимационные эффекты | Волнообразно движущийся текст, эффект 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta http-equiv="Content-Language" content="ru">

<style type="text/css">

<!--

BODY

{

background : white;

}

TABLE

{

width : 100%;

height : 100%;

}

#ID_ANIMATE

{

height : 1px;

color : black;

white-space : nowrap;

font : normal 16px "Courier New", monotype;

}

#ID_ANIMATE SPAN

{

position : relative;

}

-->

</style>

</head>

<body>

<TABLE>

<TR>

<TD align="center" valign="middle"><DIV ID="ID_ANIMATE"></DIV></TD>

</TR>

</TABLE>

<script type="text/javascript">

<!--

var nPeriod = 2; // количество периодов синусоиды

var nAmplitude2 = 32; // половина амплитуды синусоиды

var nKPhase = 16; // коэффициэнт фазового сдвига на каждой итерации

var strText = "Волнообразно движущийся текст"; // текст надписи

// --

var fPhase = 0.0;

var aoChars = new Array();

var nSteps = strText.length;

var fStep = (2 * Math.PI * nPeriod / nSteps);

var oAnimate = document.getElementById("ID_ANIMATE");

// --

function OnTimer()

{

for(var i = 0; i < nSteps; i++)

{

var nPos = Math.ceil(Math.sin(fStep * i + fPhase) * nAmplitude2);

aoChars[i].style.top = nPos.toString(10) + "px";

}

fPhase -= fStep / nKPhase;

}

// --

for(var i = 0; i < nSteps; i++)

{

var oSpan = document.createElement("SPAN");

oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));

oSpan.style.zIndex = 1;

oAnimate.appendChild(oSpan);

aoChars[i] = oSpan;

}

// --

OnTimer();

window.setInterval(OnTimer, 20);

// -->

</script>

<noscript>

Внимание ! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.

</noscript>

</body>

</html>

Эффект 3

<html lang="ru">

<head>

<title>Анимационные эффекты | Волнообразно движущийся текст, эффект 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta http-equiv="Content-Language" content="ru">

<style type="text/css">

<!--

BODY

{

background : white;

}

TABLE

{

width : 100%;

height : 100%;

}

#ID_ANIMATE

{

color : black;

white-space : nowrap;

font : normal 16px "Courier New", monotype;

}

#ID_ANIMATE SPAN

{

position : relative;

}

-->

</style>

</head>

<body>

<TABLE>

<TR>

<TD align="center" valign="middle"><span ID="ID_ANIMATE"></span></TD>

</TR>

</TABLE>

<script type="text/javascript">

<!--

var nAmp = 20; // амплитуда синусоиды

var nPeriod = 2; // количество периодов синусоиды

var nKPhase = 3; // коэффициэнт фазового сдвига на каждой итерации

var strText = "Волнообразно движущийся текст"; // текст надписи

// --

var pi = Math.PI;

var nSteps = strText.length;

var fStep = 2 * pi * nPeriod / (nSteps * nKPhase); // фазовый сдвиг на каждой итерации

var aoChars = new Array();

// --

var fX;

var fdX;

var fPhase;

var nTimerID;

function InitPhase_1()

{

fX = 0.1;

fdX = -9;

nTimerID = setInterval(OnTimer_1, 20);

}

function InitPhase_2()

{

fPhase = 0;

nTimerID = setInterval(OnTimer_2, 20);

}

function OnTimer_1()

{

fX += fdX;

if(fX > 0)

{

fX = 0;

clearInterval(nTimerID);

InitPhase_2();

}

else

fdX += 0.75;

aoChars[0].style.left = Math.ceil(fX).toString() + "px";

}

function OnTimer_2()

{

for(var i = 0; i < nSteps; i++)

{

var nPos;

var fAngle = (2 * pi * nPeriod / nSteps) * i;

if((fAngle >= fPhase) && (fAngle <= fPhase + pi))

nPos = -Math.ceil(Math.sin(fAngle - fPhase) * nAmp);

else

nPos = 0;

aoChars[i].style.top = nPos.toString(10) + "px";

}

fPhase += fStep;

if(fPhase > 2 * pi * nPeriod)

{

clearInterval(nTimerID);

setTimeout(InitPhase_1, 2000);

}

}

// --

for(var i = 0; i < nSteps; i++)

{

var oSpan = document.createElement("SPAN");

oSpan.appendChild(document.createTextNode(strText.substring(i, i + 1)));

oSpan.style.zIndex = 1;

document.getElementById("ID_ANIMATE").appendChild(oSpan);

aoChars[i] = oSpan;

}

// --

InitPhase_1();

// -->

</script>

<noscript>

Внимание ! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.

</noscript>

</body>

</html> /17/.

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Оставленные комментарии видны всем.