Come ottenere questo effetto di frantumazione del vetro per lavorare su più div?

SituazioneCome ottenere questo effetto di frantumazione del vetro per lavorare su più div?

ho questo vetro in frantumi simulazione effetto che coinvolge un certo codice javacsript di base e in questo momento funziona bene; Quando fai clic sul logo, il vetro si frantuma di conseguenza e al suo posto ricompare un nuovo logo non rotto.

Date un'occhiata al jSFiddle qui: https://fiddle.jshell.net/9n9ft9ks/3/

Problema

In questo momento, c'è solo un logo sulla pagina. Ho bisogno che ci sia più di un logo, probabilmente come cinque (gli stessi loghi dei vetri auto Floyd) tutti sulla stessa pagina, tutti con lo stesso vetro in frantumi onClick effetto. Ma quando provo a farlo da solo - metto più di uno (dello stesso logo) sulla pagina, il codice si rompe.

Come ho cercato di risolvere il problema

Il logo con il vetro in frantumi effetto è un div chiamato "#container". Quindi, dal momento che voglio più di uno di questi logo sulla pagina, ho provato a duplicare "<div id="container"></div>" un numero di volte nel codice HTML. Che non ha funzionato: https://fiddle.jshell.net/9n9ft9ks/5/

Così ho provato a cambiare il div id in un div class e ho modificato tutte le opportune javascript & linee CSS che doveva essere cambiato come:

document.getElementById('container'); a: document.getElementsByClassName('container');

#container: {} a .container{}

Ma anche quello non sembrava funzionare per me. Il logo non ha nemmeno apparire sulla pagina più dopo aver apportato queste modifiche, date un'occhiata qui: https://fiddle.jshell.net/9n9ft9ks/4/

Sommario

Ho un logo con un vetro in frantumi onClick effetto. C'è solo un logo sulla pagina. Ho bisogno che ci sia più di uno nella pagina, ma non riesco a farlo funzionare ... Se qualcuno può dare un'occhiata al codice e provare a farlo funzionare, c'è più di un logo su la pagina, lo apprezzerei molto! Qui è l'originale jSfiddle una volta di più: https://fiddle.jshell.net/9n9ft9ks/3/

fonte

2016-05-04 user1658560

Si noti che quando si utilizza 'document.getElementsByClassName ('contenitore');' che sarà sempre più oggetti indietro. Ho notato che nella console si sta verificando un errore perché stai provando a fare 'container.appendChild ...' al contenitore che contiene più elementi in una matrice invece di solo 1 elemento oggetto – camiblanch

FYI, la duplicazione di un id non è andando a lavorare nella maggior parte delle situazioni. Il browser individuerà la prima istanza dell'ID e ignorerà il resto perché gli ID dovrebbero essere unici. ID non univoco = comportamento di script inatteso e interrotto. –

Hai provato il mio suggerimento? –

Nel vostro tentativo, provare a cambiare il getElementByClassName per $('.container') e quindi sostituire il appendChild da append.

L'ho fatto funzionare, ma era un po 'disordinato, sarebbe stato necessario più CSS per rendere i loghi non sovrapposti uno sull'altro.

(è possibile aggiungere uno stile al secondo div per vedere i loghi multipli, es: <div class="container" style="left: 50px;"></div>)

Ecco il jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/

fonte

2016-05-04 17:28:29 Oylex

Grazie per il tuo aiuto! Purtroppo non ho potuto farlo funzionare. Se potessi pubblicare un jSfiddle di questo in azione, dove c'è più di un logo sulla pagina ... Sarebbe fantastico! – user1658560

https://fiddle.jshell.net/9n9ft9ks/7/ – Oylex

Ci sono due loghi. Quello è buono. Ma l'effetto frantumato non funziona nel tuo jSfiddle. :(Quando fai clic sul logo, si suppone che si spezzi. – user1658560

È non può utilizzare un unico ID più volte sullo stesso pagina.
utilizzare una classe, invece:

CSS:

.className { 
    /* attributes: values; */ 
}

HTML:

<div class="className"></div>

fonte

2016-06-06 05:44:39

Come ottenere questo effetto di frantumazione del vetro per lavorare su più div?

risposta

Problemi correlati