Небольшое украшение сайта ко дню святого Валентина

11Фев/110

Небольшое украшение сайта ко дню святого Валентина

Ко дню святого Валентина появилось желание напомнить об оном посетителям сайта, над которым я постоянно работаю. В результате родился небольшой скриптик, использующий jQuery, который выводит "хоровод" сердечек вокруг курсора. Рассказывать особо не о чем, так что вот код, который можно вставить с любое место страницы между тэгами <body> и </body>:

<script tyle="text/javascript">
	var _14febOffsetX=0;
	var _14febOffsetY=10;
	var _14febX=0;
	var _14febY=0;
	var _14febCount=5;
	var _14febAngle=0;
	function move(){
		for(var i=_14febCount;i>0;i--){
			$("#14feb"+i).stop().animate({
				left:_14febX+Math.cos(_14febAngle+i*5)*30,
				top:_14febY+Math.sin(_14febAngle+i*5)*30
			},50);
		}
		_14febAngle+=.05;
		setTimeout(function(){move();},50);
	}
	$(document).mousemove(function(e){
		_14febX=e.pageX;
		_14febY=e.pageY-$(window).scrollTop();
	});
	for(var i=_14febCount;i>0;i--){
		$('html').append('<img src="/img/heart.gif" alt="" id="14feb'+i+'" style="position:fixed;z-index:14;" />');
	}
	move();	
</script>

Все предельно просто: создаем необходимое количество изображений с фиксированным положением на странице и неавтоматическим z-index'ом, и вызываем функцию move(), которая вычисляет положение элемента на окружности на основании координат курсора, полученных обработчиком onMouseMove, и углом поворота _14febAngle.
Никакой магии!

2leep