С помощью библиотеки jQuery, или просто на JavaScript, сделайте Sprite анимацию

@Maksssssss · Регистрация: 12.08.2016

Студворк — интернет-сервис помощи студентам

помощью библиотеки JQuery, или просто на JavaScript, сделайте Sprite анимацию.

@Уф · 01.06.2018, 13:10

это из такой картинки? или если каждый кадр в отдельном файле просто перебрать все файлы в теге img?

@Maksssssss · 01.06.2018, 15:10 **[ТС]**

Можно и из этой, просто перебрать все файлы

@Уф · 01.06.2018, 20:41

JavaScript
1
2
3
4
5
6
var img_no = 1;
setInterval(function(){
   $('#my_img').attr('src','kadr'+img_no+'.jpg'); //файлы называешь kadr1.jpg, kadr2.jpg ...
   img_no++;
  if(img_no==11) img_no = 1; //если кадров 10 то на 11ом возвращаемся на первый
}, 100);

Кликните здесь для просмотра всего текста

-вам чай горячий или холодный?
-можно и холодный с кипятком

Добавлено через 4 часа 23 минуты
приколись https://jsfiddle.net/850fddz8/

CSS
1
2
3
4
5
div {
  width:66px;
  height:135px;
  background: url('https://www.cyberforum.ru/attachments/942898d1527847800');
}

JavaScript
1
2
3
4
5
6
i = 0;
setInterval(function(){
 $('div').css('background-position-x', i*66+'px');
 i++;
 if(i==7) i=0;
},200);

Добавлено через 20 минут
теперь он без рывка пляшет)
https://jsfiddle.net/850fddz8/1/

JavaScript
1
2
3
4
5
6
7
8
9
i = 0;
d = true;
setInterval(function(){
 $('span').html(i);
 $('div').css('background-position-x', i*66+'px');
 if(d) i++; else i--;
 if(i==7) d = false;
 if(i==1) d = true;
},200);

@Maksssssss · 01.06.2018, 21:06 **[ТС]**

спасибо

@mrtoxas · 02.06.2018, 13:43

На всякий случай, вариант без js

HTML5
1
<div class="anim"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.anim{
  width:66px;
  height:135px;
  background:url('https://www.cyberforum.ru/attachments/942898d1527847800') no-repeat bottom right;
  animation: anim .5s steps(6) infinite alternate;
}
@keyframes anim{
  to {
    background-position:left;
  }
}

@Maksssssss · 02.06.2018, 15:34 **[ТС]**

Спасибо

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@Maksssssss 0 / 0 / 1 Регистрация: 12.08.2016 Сообщений: 239

	С помощью библиотеки jQuery, или просто на JavaScript, сделайте Sprite анимацию 30.05.2018, 21:26. Показов 579. Ответов 6 Метки нет (Все метки) помощью библиотеки JQuery, или просто на JavaScript, сделайте Sprite анимацию. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	01.06.2018, 13:10
	это из такой картинки? или если каждый кадр в отдельном файле просто перебрать все файлы в теге img? Миниатюры 0

@Maksssssss 0 / 0 / 1 Регистрация: 12.08.2016 Сообщений: 239
	01.06.2018, 15:10 [ТС]
	Можно и из этой, просто перебрать все файлы 0

@Maksssssss 0 / 0 / 1 Регистрация: 12.08.2016 Сообщений: 239
	01.06.2018, 21:06 [ТС]
	спасибо 0

@Maksssssss 0 / 0 / 1 Регистрация: 12.08.2016 Сообщений: 239
	02.06.2018, 15:34 [ТС]
	Спасибо 0