2011-09-09 11 views
24

In una pagina Web, voglio mostrare un elenco di album e accanto al nome di ciascun album voglio mostrare una lista di immagini sovrapposte una sopra l'altra. Qual è il modo migliore per prendere dinamicamente un elenco di immagini e li hanno accatastati l'uno sopra l'altroCome visualizzare più immagini impilate l'una sull'altra in JavaScript

Ecco un esempio:

picture of images stack atop one another

+0

Quando si pronuncia dinamicamente un elenco di immagini, dove sono da.Immaginerei di impilare elementi img all'interno di una lista non ordinata con CSS sarebbe abbastanza semplice, ma è difficile dirlo senza un campione del tuo codice –

+0

@mu è troppo corto - impilato verticalmente come si vede sulla maggior parte degli strumenti che mostrano un album con una pila delle immagini in quell'album – leora

+0

@mu è troppo breve - ho messo un esempio di quello che sto cercando di fare – leora

risposta

51

Perché non solo costruire uno? non sarebbe difficile. Ecco un piccolo prototipo di rotazione ho lavorato fino (voluti forse 5 minuti per scrivere)

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); 
}; 

quindi è possibile utilizzare per ruotare un elenco di immagini .. see (not very good :P) example here

Better Example Best Example


Sembra che il PO vuole più
Come è questo per vicino -per-the-example? Penso che un paio di angoli possono essere fuori ... Example Output

O click here

+0

Aggiornamento 2015: non estendere Element.prototype, scrivere un metodo di utilità e passare l'elemento. – rlemon

6

per ruotare le immagini si sia bisogno di nuove funzionalità CSS3 o un elemento canvas, nuove da HTML5.

Scrivere alcune funzioni JS per aiutarvi nel processo di rotazione è questione di minuti.

Direi che la migliore libreria è quella che scrivi.

In ogni caso, se dovessi sceglierne uno, sceglierei Raphael.

+0

i tuoi esempi funzionano su tutti i browser? – leora

+0

Dal sito web "Raphaël attualmente supporta Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ e Internet Explorer 6.0+." –

+0

Controlla gli esempi sul sito web, in particolare [this] (http://raphaeljs.com/image-rotation.html) per la rotazione dell'immagine. Davvero fluido su tutti i browser. –

2

Le librerie ti aiuteranno a manipolare dom e rispondere agli eventi. La risposta sta nel modo in cui vedi il problema, in che modo rappresenterai i dati, come gestirai i dati dinamici che ti arrivano.

Le immagini sono elementi html, quindi possono essere manipolate con CSS3 come ha detto Jose Faeti. Ora per la parte dinamica Ti suggerisco di dare un'occhiata a backbone.js (http://documentcloud.github.com/backbone/).

In poche parole, backbone.js ti aiuterà a definire album e immagini come entità indipendenti, come visualizzazioni di hook a quei modelli di dati - viste che si adatteranno automaticamente quando i nuovi dati arrivano tramite ajax dal server - e per completare il tutto di, utilizza jQuery per la selezione dom, quindi:

1) si ottiene una bella approccio OOP-ish a definire le immagini dei dati
2) si ottiene un bel rapporto Model-View View-modello che si aggiorna facilmente
3) Si ottiene jQuery come strumento di selezione e manipolazione dom

Problemi correlati