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

Question

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

Вот пример:

Answer 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) пример здесь

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

---

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

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

Answer 2

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

Написание некоторых функций JS, чтобы помочь вам в процессе ротации, занимает считанные минуты.

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

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

Answer 3

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

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

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

1) Вы получаете хороший ООП подход к определению данных изображений
2) Вы получаете хорошие отношения Модель-Представление-Модель, которые легко обновляются
3) Вы получаете jQuery в качестве инструмента выбора и управления dom