Звезное небо - JavaScript, Ajax

П@Bел · 18.04.2009, 23:20

Как на сайте создать мигающее звездное небо?(На фоне и без gif анимации)

RJ Presto · 19.04.2009, 01:42

набросал вариант решения
с хтмлке надо подложить гифку со звёздочкой star.gif

Код HTML:

<html>
<head>
<script>
STARS_COUNT = 15; // количество звёздочек на странице
STAR_WIDTH = 50; // ширина картинки-звёздочки
STAR_HEIGHT = 50; // высота картинки-звёздочки
STAR_INTERVAL = 1200; // интервал появления звёздочек (милисекунды)
function screenSize() {
    var w, h; // Объявляем переменные, w - длина, h - высота
    w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
    h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
    return {w:w, h:h};
}
function hideStars() {
	for (var i = 0; i < STARS_COUNT; i++ ) {
		document.getElementById( "star" + i ).style.display = 'none';
	}
	setTimeout( showStars, STAR_INTERVAL );
}
function showStars() {
	for (var i = 0; i < STARS_COUNT; i++ ) {
		var x = Math.random() * ( screenSize().w - STAR_WIDTH );
		var y = Math.random() * ( screenSize().h - STAR_HEIGHT );
		document.getElementById( "star" + i ).style.left = x;
		document.getElementById( "star" + i ).style.top = y;
		document.getElementById( "star" + i ).style.display = 'block';
	}
	setTimeout( hideStars, STAR_INTERVAL );
}
</script>
</head>
<body bgcolor=blue>
Hello world!
<script>
// создаём звёздочки
for (var i = 0; i < STARS_COUNT; i++ ) {
	var x = Math.random() * ( screenSize().w - STAR_WIDTH );
	var y = Math.random() * ( screenSize().h - STAR_HEIGHT );
	document.write('<div id="star' + i + '" style="position: absolute; left:' + x + '; top: ' + y + '; z-index: -100; display: none"><img src="star.gif"></div>');
}
// запускаем цикл показали-спрятали
hideStars();
</script>
</body>
</html>

PS за гифку не пинать - набросал на скорую руку ))

18.04.2009, 23:20	#1
П@Bел Регистрация: 11.04.2009 Сообщений: 8	Звезное небо Как на сайте создать мигающее звездное небо?(На фоне и без gif анимации)