Написание анимации изображений (обмен изображениями) с помощью jQuery - PullRequest
Новая
       14

Написание анимации изображений (обмен изображениями) с помощью jQuery

0 голосов
/ 20 сентября 2010

Я пытаюсь произвольно анимировать изображения, используя jQuery и таймер (http://jquery.offput.ca/every/ работает как таймер), чтобы имитировать анимированный GIF, но позволяет определять анимацию в файле HTML (или вскрипт в верхней части страницы для многократного использования одного и того же «анимированного» изображения).

Я написал специальную версию, в которой кадры исправлены: следующий код поменяет изображения с классом «animate» с /path/to/image/dir/frame1.pngи /path/to/image/dir/frame2.png каждые 300 мс. 

<script type="text/javascript" src="jquery.timers.js"></script>
<script type="text/javascript">
    ;(function($){
        $(function() {
            var base_path = "/path/to/image/dir/";
            var on = true;
            $(".animate").everyTime(200, function(i) {
                if(!on) {
                    $(this).attr({src: base_path + "frame1.png"});
                } else {
                    $(this).attr({src: base_path + "frame2.png"});
                }
                    on = !on;
                });
            });
        })(jQuery);
</script>

Что я хотел бы сделать, это написать общую форму выше, где в теге изображения я мог бы поместитьследующие 

<img src="/path/to/fallback/image.png" class="animate {interval:300, src:[frame1.png,frame2.png]}" alt="animated image" />

и сценарий могут использовать параметры, передаваемые в атрибут класса, для определения длительности каждого кадра и исходного изображения.Изначально я хочу чередовать только два изображения, но в идеале я бы хотел, чтобы массив src содержал любое количество изображений, которые будут зацикливаться бесконечно (т. Е. Не нужно взаимодействие с пользователем).

Любые идеи о том, как яможет реализовать это?Я предполагаю, что мне понадобится некоторая форма синтаксического анализа значения ключа атрибута class, которая может быть не семантически правильной, поэтому есть ли другой (допустимый, но редко используемый) атрибут, который я мог бы использовать для хранения свойств анимации?

Ответы [ 2 ]

0 голосов
/ 20 сентября 2010

Почему бы не использовать какой-нибудь плагин для слайдера изображений, например, такой: http://nivo.dev7studios.com/

Вы можете установить анимацию переключения изображений на исчезновение.

0 голосов
/ 20 сентября 2010

Похоже, что вы в основном пытаетесь создать новый плагин jQuery.

Для хранения метаданных анимации плагин jQuery метаданных уже делает то, что вы хотите, и этоподдерживает не классовые хранилища.

Вот шаблон проектирования подключаемого модуля , который включает инструкции по интеграции подключаемого модуля метаданных.

Мое предложение состоит в том, чтобы переработать вещи так, чтобы сВ этом примере атрибута класса вы можете включить анимацию для всех случаев на текущей странице с помощью простого $('img.animate').myAnimationPlugin(); (естественно, с более характерным именем)

...