S3.Blog :: JavaScript: Поймай меня, если сможешь

JavaScript: Поймай меня, если сможешь

Дата последнего изменения: 24 Сентября 2009
Метки статьи: , ,

По просьбе друга Андрея Нидченко, который постоянно меня упрекает в том, что на этом блоге не хватает голых баб, родилась эта фича :)

Если у вас всё в порядке с JavaScript в вашем браузере, то вы наверное уже видите летающую полуголую деваху.

Андрюха - посвящаю эту статью лично тебе :)

А вот код, который это выполняет:

<img width="340" height="266" border="0" alt="" onmouseover="img_andr_jump();" onmousemove="img_andr_jump();" src="/files/others/for_anders.gif" id="imgAndr" style="display: none; position: absolute; top: 0px; left: 0px;" />
<script language="javascript">
var imgAndr = document.getElementById('imgAndr');
var vector_x = 0;
var vector_y = 0;
var cur_body_scroll_top = body_scroll_top();
imgAndr.style.display = 'block';
img_andr_jump();
var imgAndr_begin = setInterval("img_andr_begin()",10);
function max_width() {
	return parseInt(document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth);
}
function max_height() {
	return parseInt(document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight);
}
function img_andr_jump() {
	vector_x = init_vector();
	if (Math.random() > 0.5) {
		vector_x *= -1;
	}
	vector_y = init_vector();
	if (Math.random() > 0.5) {
		vector_y *= -1;
	}
	imgAndr.style.top = Math.floor(Math.random()*max_height()) + body_scroll_top() + 'px';
	imgAndr.style.left = Math.floor(Math.random()*max_width()) + 'px';
}
function img_andr_begin() {
	var c_top = body_scroll_top();
	var m_width = max_width();
	var m_height = max_height() + c_top;
	var cur_x = parseInt(imgAndr.style.left);
	var cur_y = parseInt(imgAndr.style.top);

	if ((cur_x < -(imgAndr.width/2)) && (vector_x<0)) {
		vector_x = init_vector();
	}
	if (((cur_y-c_top) < -(imgAndr.height/2)) && (vector_y<0)) {
		vector_y = init_vector();
	}
	if ((cur_x > (m_width-(imgAndr.width/2))) && (vector_x>0)) {
		vector_x = init_vector();
		vector_x *= -1;
	}
	if ((cur_y > (m_height-(imgAndr.height/2))) && (vector_y>0)) {
		vector_y = init_vector();
		vector_y *= -1;
	}
	imgAndr.style.left = cur_x + vector_x + 'px';
	imgAndr.style.top = cur_y + vector_y + (c_top - cur_body_scroll_top) + 'px';
	cur_body_scroll_top = c_top;
}
function init_vector() {
	return Math.floor(Math.random()*5)+1;
}
function body_scroll_top() {
	return parseInt(self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop));
}
</script>

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии:

25 Сентября 2009 (12:58:45)

Андрюха (гость) • ответить

Спасиба!

5 Июля 2016 (18:54:12)

Илья • ответить

Парни привет, скрипт крутой, очень рад что нашел его здесь, только мне нужен вариант применимый не ко всему экрану, а только к определенному диву. Можете помочь? заранее СПАСИБО.

6 Июля 2016 (12:03:48)

Александр • ответить


<html>
<body>
<div id="imgAndr_box" style="border: 1px red solid; width: 400px; height: 400px;position: absolute;">
<img width="100" border="0" alt="" onmouseover="img_andr_jump();" onmousemove="img_andr_jump();" src="http://www.s3blog.org/files/others/for_anders.gif" id="imgAndr" style="display: none; position: relative; top: 0px; left: 0px;" />
</div>
<script language="javascript">
var imgAndr = document.getElementById('imgAndr');
var imgAndr_box = document.getElementById('imgAndr_box');
var vector_x = 0;
var vector_y = 0;
imgAndr.style.display = 'block';
img_andr_jump();
var imgAndr_begin = setInterval("img_andr_begin()",10);
function max_width() {
	return imgAndr_box.clientWidth - imgAndr.clientWidth;
}
function max_height() {
	return imgAndr_box.clientHeight - imgAndr.clientHeight;
}
function img_andr_jump() {
	vector_x = init_vector();
	if (Math.random() > 0.5) {
		vector_x *= -1;
	}
	vector_y = init_vector();
	if (Math.random() > 0.5) {
		vector_y *= -1;
	}
	imgAndr.style.top = Math.floor(Math.random()*max_height()) + 'px';
	imgAndr.style.left = Math.floor(Math.random()*max_width()) + 'px';
}
function img_andr_begin() {
	var m_width = max_width();
	var m_height = max_height();
	var cur_x = parseInt(imgAndr.style.left);
	var cur_y = parseInt(imgAndr.style.top);
	if ((cur_x < 0) && (vector_x<0)) {
		vector_x = init_vector();
	}
	if ((cur_y < 0) && (vector_y<0)) {
		vector_y = init_vector();
	}
	if ((cur_x > m_width) && (vector_x>0)) {
		vector_x = init_vector();
		vector_x *= -1;
	}
	if ((cur_y > m_height) && (vector_y>0)) {
		vector_y = init_vector();
		vector_y *= -1;
	}
	imgAndr.style.left = cur_x + vector_x + 'px';
	imgAndr.style.top = cur_y + vector_y + 'px';
}
function init_vector() {
	return Math.floor(Math.random()*5)+1;
}
</script>
</body>
</html>

6 Июля 2016 (14:28:04)

Илья • ответить

Александр АгРоМнОеееее.... с Вашей помощью все ЗАДАЛОСЬ и вот что вышло -

http://www.magic-steam.com/

В самом низу сайта игра на 100% скидку в которую нельзя победить)))

Есчо раз СПАССИБО.

6 Июля 2016 (14:35:31)

Александр • ответить

красиво получилось, молодец

6 Июля 2016 (15:38:10)

Илья • ответить

Буду следить за Вашим блогом, с нетерпением жду новых интересностей)))

20 Апреля 2022 (13:12:36)

10+5 (гость) • ответить

Bravo,ma purtroppo è non più disponibile!

22 Июля 2016 (00:25:45)

Илья • ответить

Александр добрый день, я опять к Вам за интересными скриптами)

Ищу решение дла реализации такой задачи - вот сайт SEOmirage.ru
Точнее его первая страничка.
Сайт предполагается сделать в стиле комиксов.
В самом начале после загрузки на фоне проявляются следы, ни как не могу сделать что бы они двигались вместе с фоном.

22 Июля 2016 (19:51:34)

Александр • ответить

я честно пытался понять как оно работает, но не смог понять ваши алгоритмы.
извините

S3.Blog

JavaScript: Поймай меня, если сможешь

Похожие материалы:

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS Комментарии:

Авторизоваться :: Зарегистрироваться :: Комментарии в RSS
Комментарии: