2014-09-04
261
<html lang="ru">
<head>
<title>Анимационные эффекты | Падающий снег</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: #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>
<TD align="center" valign="middle">
<DIV ID="ID_ANIMATE">
<TABLE>
<TR>
<TD align="center" valign="middle" ID="ID_LOGO">
<SPAN style="color: red;">Новогодний скрипт<br>Специально для книги<br><b>"JavaScript, изучи на примерах"</b><br>обновления:</SPAN> <a href="https://codeguru.ru">codeguru.ru</a>
</TD>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
</TABLE>
<script type="text/javascript">
<!--
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>
Внимание! Ваш браузер не поддерживает выполнение скриптов, либо скрипты отключены.
</noscript>
</body>
</html>
