Добавил:

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 27 28 2930 / 3230 31 32 > Следующая >>>

10.7. Движение фонового рисунка страницы («летящие звезды», «эффект фейерверка», «падающий снег», «часы со стрелками»)

Летящие звезды

<head>

<title>Анимационные эффекты | Летящие звезды, эффект 1</title>

<style>

<!--

HTML, BODY

{

position : relative;

margin : 0px;

padding : 0px;

width : 100%;

height : 100%;

overflow : hidden;

}

BODY

{

background-color : black;

}

{

color : green;

text-decoration : none;

}

a:hover

{

text-decoration : underline;

}

/* -- */

table.c

{

width : 100%;

height : 100%;

border : none;

}

table.c td

{

text-align : center;

font : 14px "Courier New", Courier;

}

-->

</style>

</head>

<tr>

<td valign="middle"><a

href="http://codeguru.ru"

alt="Исходники, статьи по программированию, скрипты"

title="Исходники, статьи по программированию, скрипты"

>http://codeguru.ru</a></td>

</tr>

</table>

<!--

// Code by Victor V. Vakchturov (http://codeguru.ru)

// Настройки

var nStarCount = 128; // Количество звезд

var nMinSpeed = 1; // Минимальная скорость

var nMaxSpeed = 5; // Максимальная скорость

var nMinSize = 1; // Минимальный размер "звезд"

var nMaxSize = 3; // Максимальный размер "звезд"

// --

var aStars = new Array(nStarCount);

var nWidth = screen.width;

var nHeight = screen.height;

function N2ByteHexStr(n)

{

var str = (n & 0x0000FF).toString(16);

if(str.length < 2)

str = '0' + str;

return str;

}

function RGB_Str(r, g, b)

{

return '#' +

N2ByteHexStr(r) +

N2ByteHexStr(g) +

N2ByteHexStr(b);

}

function UpdateStarPos(i)

{

var oDiv = aStars[i];

oDiv.style.top = oDiv.y.toString() + "px";

oDiv.style.left = oDiv.x.toString() + "px";

}

function ResetStar(i, x)

{

var oDiv = aStars[i];

if(x < 0)

x = Math.round(Math.random() * nWidth);

oDiv.x = x;

oDiv.y = Math.round(Math.random() * nHeight);

// Можно было и не округлять скорость, а округлять координату x.

// Однако, при таком подходе (когда скорость - целое число), визуально

// можно выделить группы звезд, движущихся с одинаковой скоростью.

// Субъективно, это создает бОльший эффект перспективы, чем при

// использовании действительных значений скорости.

oDiv.nSpeed = Math.round(Math.random() * (nMaxSpeed - nMinSpeed)) + nMinSpeed;

oDiv.style.backgroundColor = RGB_Str( Math.round(Math.random() * 0xFF),

Math.round(Math.random() * 0xFF),

Math.round(Math.random() * 0xFF));

var nSize = Math.round(Math.random() * (nMaxSize - nMinSize)) + nMinSize;

oDiv.style.width = nSize.toString(10) + "px";

oDiv.style.height = oDiv.style.width;

UpdateStarPos(i);

}

function MoveStars()

{

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

{

aStars[i].x += aStars[i].nSpeed;

if(aStars[i].x > nWidth)

ResetStar(i, 0);

else

UpdateStarPos(i);

}

function GenerateStars()

{

var d = document;

var b = d.body;

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

{

var oDiv = aStars[i] = d.createElement("DIV");

b.appendChild(oDiv);

oDiv.style.overflow = "hidden";

oDiv.style.position = "absolute";

ResetStar(i, -1);

}

GenerateStars();

window.setInterval(MoveStars, 30);

// -->

</script>

</body>

</html>

Эффект фейерверка

<head>

<title>Анимационные эффекты | Эффект фейерверка</title>

<style>

<!--

BODY

{

background : white;

}

TABLE

{

width : 100%;

height : 100%;

}

#ID_ANIMATE

{

position : relative;

width : 420px;

height : 256px;

overflow : hidden;

background : black;

}

#ID_ANIMATE DIV

{

position : absolute;

width : 1px;

height : 1px;

font-size : 0px;

z-index : 1;

}

#ID_ANIMATE #ID_LOGO

{

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

}

-->

</style>

</head>

<body>

<TABLE>

<TR>

<TABLE>

<TR>

<span style="color: red;">Скрипт, создающий эффект фейерверка.<br>

Он может использоваться для размещения блоков поздравлений

или праздничных объявлений на сайте.</span>

<a style="color: blue;" href="http://codeguru.ru">codeguru.ru</a>

</TD>

</TR>

</TABLE>

</DIV>

</TD>

</TR>

</TABLE>

<!--

// Code by Victor V. Vakchturov (http://codeguru.ru)

// Настройки

var nStarCount = 256; // Количество звезд фейерверка

var nMinSpeed = 2; // Минимальная скорость звезд

var nMaxSpeed = 4; // Максимальная скорость звезд

var nMinLive = 32; // Минимальное время жизни элемента

var nMaxLive = 42; // Максимальное время жизни элемента

var fDSpeed = 0.1; // Величина уменьшения скорости элементов

// --

var nTimerID = 0;

var aStars = new Array(nStarCount);

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

var nWidth = oAnimate.offsetWidth;

var nHeight = oAnimate.offsetHeight;

// Еще настройки

var nMinX = Math.round(nWidth / 4);

var nMaxX = Math.round(nWidth / 4 * 3);

var nMinY = Math.round(nHeight / 4);

var nMaxY = Math.round(nHeight / 4 * 3);

function UpdateStarPos(i)

{

var oDiv = aStars[i];

oDiv.style.top = Math.round(oDiv.y).toString() + "px";

oDiv.style.left = Math.round(oDiv.x).toString() + "px";

}

function UpdateStarBgColor(i)

{

var oDiv = aStars[i];

oDiv.style.backgroundColor = "RGB(" +

Math.round(Math.random() * 0xFF).toString() + "," +

Math.round(Math.random() * 0xFF).toString() + ")";

}

function ResetStar(i, x, y)

{

var oDiv = aStars[i];

oDiv.x = x;

oDiv.y = y;

oDiv.fSpeed = Math.random() * (nMaxSpeed - nMinSpeed) + nMinSpeed;

oDiv.fCos = Math.random() * 2 - 1;

oDiv.fSin = Math.random() * 2 - 1;

oDiv.nLive = Math.round(Math.random() * (nMaxLive - nMinLive) + nMinLive);

UpdateStarPos(i);

UpdateStarBgColor(i);

}

function MoveStars()

{

var bEndShow = true;

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

{

var oDiv = aStars[i];

if(oDiv.nLive)

{

oDiv.x += oDiv.fSpeed * oDiv.fCos;

oDiv.y += oDiv.fSpeed * oDiv.fSin;

oDiv.fSpeed -= fDSpeed;

if(oDiv.fSpeed < 0)

oDiv.fSpeed = 0;

UpdateStarPos(i);

UpdateStarBgColor(i);

oDiv.nLive--;

if(!oDiv.nLive)

oDiv.style.backgroundColor = "black";

bEndShow = false;

}

if(bEndShow)

{

window.clearInterval(nTimerID);

window.setTimeout(StartFireShow, 1500);

}

function StartFireShow()

{

var x = Math.round(Math.random() * (nMaxX - nMinX)) + nMinX;

var y = Math.round(Math.random() * (nMaxY - nMinY)) + nMinY;

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

ResetStar(i, x, y);

nTimerID = window.setInterval(MoveStars, 40);

}

function GenerateStars()

{

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

{

var oDiv = aStars[i] = document.createElement("DIV");

oDiv.style.width = "1px";

oDiv.style.height = "1px";

oDiv.style.overflow = "hidden";

oDiv.style.position = "absolute";

oAnimate.appendChild(oDiv);

}

GenerateStars();

StartFireShow();

// -->

</script>

</body>

</html>

Падающий снег

<head>

<title>Анимационные эффекты | Падающий снег</title>

<!--

BODY

{

background : #CCCCCC;

}

TABLE

{

width : 100%;

height : 100%;

}

#ID_ANIMATE

{

position : relative;

overflow : hidden;

background : white;

border : 1px solid #808080;

width : 384px;

height : 256px;

}

#ID_ANIMATE IMG

{

position : absolute;

width : 9px;

height : 9px;

font-size : 0px;

z-index : 1;

}

#ID_ANIMATE #ID_LOGO

{

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

}

-->

</style>

</head>

<body>

<TABLE>

<TR>

<TABLE>

<TR>

<SPAN style="color: red;">Новогодний скрипт<br>Специально для книги<br><b>"JavaScript, изучи на примерах"</b><br>обновления:</SPAN> <a href="http://codeguru.ru">codeguru.ru</a>

</TD>

</TR>

</TABLE>

</DIV>

</TD>

</TR>

</TABLE>

<!--

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

var nWidth = oAnimate.offsetWidth;

var nHeight = oAnimate.offsetHeight;

var nFSize = 9;

var nCount = 30;

var nMaxSpeed = 4;

var strFlakeURL = "13_15_img/snowflake.gif";

// --

var aoFlakes = new Array(nCount);

// --

function UpdateFlakePos(nNum)

{

var oImg = aoFlakes[nNum];

oImg.style.top = oImg.m_nY.toString(10) + "px";

oImg.style.left = oImg.m_nX.toString(10) + "px";

}

function ResetFlake(nNum, bRandY)

{

var oImg = aoFlakes[nNum];

oImg.m_nX = Math.ceil(Math.random() * nWidth);

oImg.m_nY = bRandY ? Math.ceil(Math.random() * nHeight) : -nFSize;

oImg.m_nSpeed = Math.ceil(Math.random() * nMaxSpeed) + 1;

}

function OnTimer()

{

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

{

var oImg = aoFlakes[i];

oImg.m_nX += Math.ceil(Math.random() * 3 - 2);

oImg.m_nY += oImg.m_nSpeed;

if(oImg.m_nY > nHeight)

ResetFlake(i, false);

UpdateFlakePos(i);

}

// --

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

{

var oImg = document.createElement("IMG");

oImg.src = strFlakeURL;

oAnimate.appendChild(oImg);

aoFlakes[i] = oImg;

ResetFlake(i, true);

UpdateFlakePos(i);

}

window.setInterval(OnTimer, 50);

// -->

</script>

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

</noscript>

</body>

</html>

Часы со стрелками

<head>

<title>Анимационные эффекты | Часы со стрелками</title>

<!--

BODY

{

background : white;

}

TABLE.main,

TABLE.clock

{

width : 100%;

height : 100%;

font : bold 12px "Times New Roman";

}

#ID_ANIMATE

{

position : relative;

width : 128px;

height : 128px;

overflow : hidden;

background : #EEEEEE;

border : 1px solid black;

}

#ID_ANIMATE DIV

{

position : absolute;

width : 1px;

height : 1px;

overflow : hidden;

z-index : 1;

background : black;

}

-->

</style>

</head>

<body>

<TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE></DIV>

</TD>

</TR>

</TABLE>

<!--

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

var nWidth = oAnimate.offsetWidth;

var nHeight = oAnimate.offsetHeight;

var nHourLen = Math.round(nWidth / 32 * 5);

var nMinLen = Math.round(nWidth / 32 * 7);

var nSecLen = Math.round(nWidth / 32 * 10);

var aDivHour = new Array(nHourLen);

var aDivMin = new Array(nMinLen);

var aDivSec = new Array(nSecLen);

function GetArrowDim(val, r, d)

{

var fAngle = Math.PI / 2 - val * 2 * Math.PI / d;

return {

dx : r * Math.cos(fAngle),

dy : -r * Math.sin(fAngle)

};

}

function sgn(x)

{

return (x > 0) ? 1 : ((x < 0) ? -1 : 0);

}

function DrawArrow(raDivs, oArrDim)

{

var dx, dy;

var nCount;

if(Math.abs(oArrDim.dx) > Math.abs(oArrDim.dy))

{

dy = oArrDim.dy / Math.abs(oArrDim.dx);

dx = sgn(oArrDim.dx);

nCount = Math.abs(oArrDim.dx);

}

else

{

dx = oArrDim.dx / Math.abs(oArrDim.dy);

dy = sgn(oArrDim.dy);

nCount = Math.abs(oArrDim.dy);

}

var x = Math.round(nWidth / 2);

var y = Math.round(nHeight / 2);

for(var i = 0; i < raDivs.length; i++)

{

var oDiv = raDivs[i];

if(i < nCount)

{

oDiv.style.top = Math.round(y).toString() + "px";

oDiv.style.left = Math.round(x).toString() + "px";

oDiv.style.display = "block";

}

else

oDiv.style.display = "none";

x += dx;

y += dy;

}

function OnTimer()

{

var oDate = new Date();

DrawArrow(aDivHour, GetArrowDim(oDate.getHours(), nHourLen, 12));

DrawArrow(aDivMin, GetArrowDim(oDate.getMinutes(), nMinLen, 60));

DrawArrow(aDivSec, GetArrowDim(oDate.getSeconds(), nSecLen, 60));

}

function CreateDivs(raDivs, nCount)

{

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

{

raDivs[i] = document.createElement("DIV");

oAnimate.appendChild(raDivs[i]);

}

CreateDivs(aDivHour, nHourLen);

CreateDivs(aDivMin, nMinLen);

CreateDivs(aDivSec, nSecLen);

OnTimer();

window.setInterval(OnTimer, 1000);

// -->

</script>

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

</noscript>

</body>

</html>/17/.

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

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

#
01.04.2025253.44 Кб0мет. курс.ПО.doc
#
01.05.2025423.42 Кб0Мет. рек ВКР.doc
#
01.05.2025233.47 Кб0мет. курс.ПО.doc
#
26.02.2016722.43 Кб34мет. ук. ГОС.doc
#
26.02.2016152.58 Кб24МЕТ.УКАЗ 12 ПС ВОЗД Дизайн.doc
#
26.02.2016548.86 Кб93Мет.указание_Web-программирование_ПОАС.doc
#
09.11.2019152.06 Кб3Мет.указания к выполнению курсовой работы.doc
#
26.02.2016777.22 Кб82мет00.doc
#
26.02.2016702.49 Кб18мет_BD Delphi.pdf
#
01.05.2025178.18 Кб0металлы 2.doc
#
30.08.2019448 Кб23метеорология.doc