Как отображать несколько изображений, сложенных друг на друга в JavaScript

На веб-странице я хочу показать список альбомов, а рядом с каждым названием альбома я хочу показать сложный список изображений друг на друга. Каков наилучший способ динамического переноса списка изображений и их укладки друг на друга.

Вот пример:

Ответ 1

Почему бы просто не построить его? это было бы не сложно. Вот небольшой прототип вращения, над которым я работал (может потребоваться 5 минут для записи)

Element.prototype.rotate = function(d) {
    var s = "rotate(" + d + "deg)";
    if (this.style) { // regular DOM Object
        this.style.MozTransform = s;
        this.style.WebkitTransform = s;
        this.style.OTransform = s;
        this.style.transform = s;
    }
    this.setAttribute("rotation", d);
};

то вы можете использовать для этого поворот списка изображений. см. здесь пример (не очень хорошо: P)

Лучший пример Лучший пример

Похоже, OP хочет больше
Как это для близкого к примеру? Я думаю, что несколько углов могут быть выключены...

Или нажмите здесь

Ответ 2

Для поворота изображений вам понадобятся новые функции CSS3 или элемент canvas, новый для HTML5.

Написание некоторых функций JS, которые помогут вам в процессе вращения, это вопрос минут.

Я бы сказал, что лучшая библиотека - это та, которую вы пишете.

В любом случае, если бы мне пришлось выбирать один, я бы выбрал Raphael.

Ответ 3

Библиотеки просто помогут вам управлять манипулятором и отвечать на события. Ответ заключается в том, как вы видите проблему, как вы будете представлять данные, как вы будете обрабатывать динамические данные, которые приходят к вам.

Изображения представляют собой html-элементы, поэтому их можно манипулировать с помощью CSS3, как сказал Хосе Фаэти. Теперь для динамической части я предлагаю вам взглянуть на backbone.js(http://documentcloud.github.com/backbone/).

В нескольких словах backbone.js поможет вам определить альбомы и изображения как автономные объекты, взгляды на крючки к этим моделям данных - представления, которые будут автоматически адаптироваться, когда новые данные поступают через ajax с сервера, - и, прежде всего, он использует jQuery для выбора dom, поэтому:

1) Вы получаете хороший подход OOP-ish к определению данных ваших изображений
2) Вы получаете хорошее отношение Model-View View-Model, которое легко обновляется

3) Вы получаете jQuery как инструмент выбора и манипуляции dom