В этой статье примеры показывают, как JS реализует фоновый эффект вселенной и Starry Sky. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Кода -копия выглядит следующим образом:
<! Doctype html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<Title> Cosmic Starry Sky Founal Effect, JS Special Effect </title>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<стиль типа = "text/css">
.star {
позиция: абсолютно;
Слои-грань-цвета: белый;
видимость: видимая;
Верх: -50px;
Ширина: 50px;
Высота: 50px;
размер шрифта: 1px;
фоновый цвет: белый;
}
.60pt {font-size: 60pt; color:#ff66cc;}
</style>
<Script language = "javascript">
<!-
var starnum = 75; // количество звезд
var isns = (document.layers);
var _all = (isns)? '' : 'все.';
var _style = (isns)? '': '.style';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
Функция getStartpos (obj) {// определить начальную позицию движущихся звезд
obj.deltay = math.floor (math.random () * 12); // Решите со случайной функцией
obj.deltax = math.floor (math.random () * 12);
obj.xdir = (math.floor (math.random () * 2) == 1)? '+': '-';
obj.ydir = (math.floor (math.random () * 2) == 1)? '+': '-';
obj.counter = 1;
if (isns) {
obj.clip.width = 1;
obj.clip.height = 1;
obj.moveto (xoffset+pagexoffset, yoffset+pageyoffset);
} еще {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
}
}
Функция Movestar (Starn) // Положение движущихся звезд
{
tmpx = starn.deltax*starn.counter+starn.counter;
tmpy = starn.deltay*starn.counter+starn.counter;
if (isns) {
starn.clip.width = starn.counter / 3;
starn.clip.height = starn.counter / 3;
scrlx = pagexoffset;
scrly = pageyoffset;
if ((starn.left+tmpx> = w_x+scrlx) || (starn.top+tmpy> = w_y+scrly) || (starn.left-tmpx <= scrlx) || (starn.top-tmpy <= scrlx) ||
GetStartpos (Starn);
} еще {
eval ('starn.moveby ('+starn.xdir+tmpx+','+starn.ydir+tmpy+')') ');
}
} еще {
starn.width = starn.counter/3;
starn.height = starn.counter/3;
scrlx = document.body.scrollleft;
scrly = document.body.scrolltop;
if ((starn.pixelleft+tmpx> = w_x+scrlx) || (starn.pixeltop+tmpy> = w_y+scrly) || (starn.pixelleft-tmpx <= scrlx) || (starn.pixeltop-tmpy <= scrlx) ||
GetStartpos (Starn);
} еще {
eval ('starn.pixeltop'+starn.ydir+'= tmpy');
eval ('starn.pixelleft'+starn.xdir+'= tmpx');
}
}
starn.counter ++;
}
Функция animate () // Пусть все звезды движутся
{
for (i = 1; i <= starnum; i ++) {
Movestar (eval ('star'+i));
}
setTimeout ('animate ()', 100);
}
function findwindowparams () {// определить начальную позицию движущихся звезд
w_x = (isns)? window.innerwidth: document.body.clientwidth;
w_y = (isns)? window.innerheight: document.body.clientheight;
xoffset = w_x / 2;
yoffset = w_y / 2;
for (i = 1; i <= starnum; i ++) {
GetStartPos (eval ('Star'+i));
}
}
функция resizens () {
setTimeout ('document.location.reload ()', 400);
}
(есть)? window.onresize = resizens: window.onresize = findwindowparams;
window.onload = новая функция ("findwindowparams (); animate ();");
->
</script>
</Head>
<Тело>
<body bgcolor =#999999>
<Script language = "javascript">
<!-
for (i = 1; i <= starnum; i ++) {// определить слои для звезд
document.writeln ('<<div id = "star'+i+'"> </div>');
eval ('var star'+i+'= document.'+_ all+'star'+i+_style);
}
->
</script>
<p> <Center>
<font class = 60pt> <br> Полет в звездном небе вселенной <br> </font>
</center> <p>
</body>
</html>
Эффект работы показан на рисунке ниже:
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.