Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Курганский государственный университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Мет.указание_Web-программирование_ПОАС.doc

Скачиваний:

Добавлен:

26.02.2016

Размер:

548.86 Кб

Скачать

☆

<<< < Предыдущая 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2728 / 3228 29 30 31 32 > Следующая >>>

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

Эффект 1

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

<head>

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

<!--

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>

</TR>

</TABLE>

<!--

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>

</body>

</html>

Эффект 2

<head>

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

<!--

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>

</TR>

</TABLE>

<!--

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>

</body>

</html>

Эффект 3

<head>

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

<!--

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>

</TR>

</TABLE>

<!--

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>

</body>

</html> /17/.

<<< < Предыдущая 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 2728 / 3228 29 30 31 32 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
26.02.2016237.06 Кб20мет. курс.мпо.doc
#
26.02.2016223.23 Кб24мет. курс.ПО.doc
#
26.02.2016265.73 Кб88мет. курс.ПО.doc
#
26.02.2016722.43 Кб34мет. ук. ГОС.doc
#
26.02.2016152.58 Кб19МЕТ.УКАЗ 12 ПС ВОЗД Дизайн.doc
#
26.02.2016548.86 Кб85Мет.указание_Web-программирование_ПОАС.doc
#
09.11.2019152.06 Кб3Мет.указания к выполнению курсовой работы.doc
#
26.02.2016777.22 Кб79мет00.doc
#
26.02.2016702.49 Кб18мет_BD Delphi.pdf
#
30.08.2019448 Кб22метеорология.doc
#
13.11.2018748.03 Кб3Метод КР Статистика.doc