Немного модифицировал пример выше, написав "класс" под эту задачу (может на странице несколько анимаций) 
Принимает параметры:
1. Высота кадра
2. Высота спрайта
3. Скорость анимации (По умолчанию 40 миллисекунд (25 кадров в секунду))
Анимация воспроизводится с места остановки,
но если в метод start_animate() передать true, то анимация будет запускаться сначала.
Спойлер (Отобразить)
CODE ( javascript):
скопировать код в буфер обмена
function my_animat(animate_conteiner) { this.animate_conteiner = animate_conteiner; this.setAnimate; this.flag = this.flag | 0; this.t = this.t | 0; this.H = 0; // Высота кадра и самого контейнера this.sprH = 0; // Высота спрайта this.speed; // Скорость анимации } my_animat.prototype.frame_H = function(h) { this.H = h; } my_animat.prototype.spr_H = function(h) { this.sprH = h; } my_animat.prototype.speed_animate = function(s) { this.speed = s; } my_animat.prototype.start_animate = function(n) { if(this.H == 0) { alert('Укажите высоту кадра используя метод frame_H()'); return false; } if(this.sprH == 0) { alert('Укажите высоту спрайта используя метод spr_H()'); return false; } if(this.flag == 0) { this.flag = 1; var f = this; // Если n == true, то анимация будет запускаться сначала f.t = (n) ? 0 : f.t; this.setAnimate = setInterval(function(){ f.t += f.H; if(f.t == f.sprH) f.t = 0; f.animate_conteiner.css({'background-position':'0 -'+f.t+'px'}); }, this.speed); } } my_animat.prototype.stop_animat = function() { if(this.flag == 1) { this.flag = 0; clearInterval(this.setAnimate); } } //////////////////////////////////////////////////////////////////////////////////////// // Использование ////////////////////////////////////////////////////////////////////// $(function(){ var my_animat1 = new my_animat($('#animate-conteiner')); my_animat1.speed_animate(40); // Cкорость анимации my_animat1.frame_H(128); //Высота кадра my_animat1.spr_H(3840); // Высота спрайта my_animat1.start_animate(); // Запуск анимации $('#btn-start').click(function(e) { my_animat1.start_animate(/* Если true, то анимация будет запускаться сначала */); }); // Остантовка анимации $('#btn-stop').click(function(e) { my_animat1.stop_animat(); }); });
Живой пример тут.(Отредактировано автором: 05 Июля, 2012 - 10:50:45)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Без описания
