S3.Blog

23 Июня 2017
A A A   RSS-лента
"Я знаю, что ничего не знаю, но многие не знают и этого". Сократ [?].

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

Дата последнего изменения: 24 Сентября 2009
Метки статьи: Готовые решения, © Авторское, JavaScript
По просьбе друга Андрея Нидченко, который постоянно меня упрекает в том, что на этом блоге не хватает голых баб, родилась эта фича :)
 

Если у вас всё в порядке с 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>


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




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

<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>
Ильяответить
Александр АгРоМнОеееее.... с Вашей помощью все ЗАДАЛОСЬ и вот что вышло -

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

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

Есчо раз СПАССИБО.
Александрответить
красиво получилось, молодец
Ильяответить
Буду следить за Вашим блогом, с нетерпением жду новых интересностей)))
Ильяответить
Александр добрый день, я опять к Вам за интересными скриптами)

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

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

 
 
  Имя *:   Решите пример *: =
 
Полужирный Курсив Подчеркнутый Перечеркнутый
 
Вставить изображение Сделать цитатой Вставить ссылку Вставить код

Вставить смайл
 
 

 



© S3.Blog: Если критикуешь, не предлагая решения проблемы, то ты становишься частью этой проблемы.