Показать сообщение отдельно
  #1 (permalink)  
Старый 30.03.2015, 02:31
Новичок на форуме
Отправить личное сообщение для markovsdima Посмотреть профиль Найти все сообщения от markovsdima
 
Регистрация: 30.03.2015
Сообщений: 3

PNG спрайт анимация loop delay
Доброго времени суток!

Есть код, взятый с сайта хабрахабр, который воспроизводит анимацию бесконечно, при наведении.
Как упростить скрипт, чтобы анимация запускалась при открытии страницы, убрать всякие onmouseover, onmouseout, и задать задержку между каждым проходом спрайта?

<script>
var styles = {};
styles.cursor = 'pointer';
styles.width = '200px';
styles.height = '50px';
var elementId = 'gun';
var imgName = 'canvas.png';

spriteAnimation(elementId, imgName, styles);
spriteAnimation('ship', 'ship.png', styles);

function spriteAnimation(elementId, imgName, styles) {
	
	var img = document.createElement('img');
	var offset = 0;
	img.onload = function () {
		var element = document.getElementById(elementId);
		element.style.cursor     = styles.cursor;
		element.style.width      = styles.width;
		element.style.height     = styles.height;
		element.style.background = "url('" + imgName + "') " + offset + "px 50%";
		var i = 0;
		element.onmouseover = function() {
			interval = setInterval(function() {
				if (offset < img.width) {
					i++;
				} else {
					
					i = 0;
				}
				offset = -200 * i;
				element.style.background = "url('" + imgName + "') " + offset + "px 50%"; 
			} , 1000/15)
			then 
		}
		element.onmouseout = function(){
			clearInterval(interval)
		}
	}
	img.src = imgName;
}

</script>


http://habrahabr.ru/post/130193/
Ответить с цитированием