English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'effetto è il seguente:
Figura (1) chiusa
Figura (2) aperta
Il codice è il seguente:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50px auto; } .panel-title { width: 100%; height: 68px; text-align: center; font: 600 18px/68px '微软雅黑'; color: #fff; cursor: pointer; } .collapse { width: 100%; height: 0; background-color: #167EA0; overflow: hidden; } .collapse p { color: #fff; font: 500 16px '微软雅黑'; text-indent: 2em; padding: 20px 20px 0 20px; } #One,#Tow,#Three{ border-top: solid 1px #ccc; } </style> </head> <body> <div class="panel" id="panel"> <h4 class="panel-title" id="panel-title">1 《抉择》</h4> <div class="collapse" id = "One"><p></p></div> <h4 class="panel-title" id="panel-title">2 《生命》</h4> <div class = "collapse" id="Tow"><p></p></div> <h4 class="panel-title" id="panel-title">3 《大小》</h4> <div class = "collapse" id="Three"><p></p></div> <h4 class="panel-title" id="panel-title">4 《崇拜》</h4> <div class = "collapse" id="Four"><p></p></div> </div> </body> <script> function animate(obj, json, endFn){ //Chiudi l'ultimo timer clearInterval(obj.timer); //Gestisci il timer obj.timer = setInterval(function(){ //Interruttore del timer, utilizzato per determinare se il timer è impostato var flag = true; //Esegui il ciclo su json for(var arrt in json){ //Calcolo del passo: passo = posizione di destinazione - posizione attuale var step = (json[arrt] - parseInt(getStyle(obj, arrt))) / 5; //Arrotondamento del passo step = step > 0 ? Math.ceil(step) : Math.floor(step); //Spostamento della scatola: posizione attuale della scatola + passo arrotondato obj.style[arrt] = parseInt(getStyle(obj, arrt)) + step + 'px'; //Se una di queste non soddisfa le condizioni, non fermare il timer if(parseInt(getStyle(obj, arrt)) != json[arrt]){ flag = false; } } //Chiudi il timer if(flag){ clearInterval(obj.timer); //Esegui la funzione di callback dopo 2 secondi setTimeout(function(){ //Verifica se c'è una funzione di callback, se c'è endFn esegui la funzione di callback endFn && endFn(); }, 1000); } }, 20); } //Ottieni lo stile attuale function getStyle(obj, arrt){ //Compatibile con ie return obj.currentStyle ? obj.currentStyle[arrt] : getComputedStyle(obj, null)[arrt]; } var panel = document.getElementById("panel"); var oH = panel.getElementsByTagName('h4'); var oDiv = panel.getElementsByTagName('div'); La vita umana è spesso in una situazione di scelta, come: quale università frequentare? Quale professione scegliere? Con quale donna sposarsi?... E così via, molte cose che rendono la testa confusa. La presenza o l'assenza di capacità di scelta di una persona può dimostrare il suo livello di maturità personale. Al contrario, coloro che non hanno una propria opinione non sperimentano il dolore della scelta. Poiché quando si deve prendere una decisione, loro cercano sempre di chiedere agli altri: 'Ehi, cosa ne pensi di fare?' Tuttavia, coloro che riescono a compiere grandi opere sono persone con una forte capacità di scelta. Loro sanno che il successo o il fallimento delle cose dipende dal fatto che nessuno può fare il loro lavoro al loro posto, e nemmeno qualcuno può prendere decisioni per loro. Nel momento in cui si prende una decisione, il successo o il fallimento è già iniziato a manifestarsi. Certamente, questa essenza potrebbe essere degradante, debole e noiosa; il suo proprietario non ha la possibilità di scegliere. Dovrebbe essere riconosciuto che la vita è speranza. Dovrebbe essere detto che la bassa moralità e la vulgarità non dovrebbero essere troppo soddisfatti troppo presto, né dovrebbero essere considerate come se avessero già distrutto l'elevazione e la purezza. Nemmeno l'imitazione può durare a lungo, perché il tempo è come un fiume che scorre incessantemente, i volgari, gli imbroglioni e i mercenari non possono indossare per sempre la corona di educatori, poeti e guerrieri. Alla fine della loro vita senza ostacoli, i loro discendenti sentiranno un senso di vergogna a lungo. for(var i = 0;i<oH.length;i++){ oH[i].index = i; oH[i].onclick = function(){ for(var j = 0;j<oH.length; j++){ animate(oDiv[j],{height:0}); } if(parseInt(getStyle(oDiv[this.index],'height')) == 0){ animate(oDiv[this.index],{height:210}); oDiv[this.index].children[0].innerHTML = str[this.index]; } animate(oDiv[this.index],{height:0}); } } } </script> </html>
Questo è tutto il contenuto dell'articolo, speriamo che il contenuto di questo articolo possa essere di aiuto per il tuo studio o lavoro, e speriamo di ricevere più supporto per il tutorial Yell!
Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, è di proprietà del rispettivo autore, il contenuto è stato contribuito volontariamente dagli utenti di Internet e caricato autonomamente, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata la violazione, questo sito rimuoverà immediatamente i contenuti sospetti.