English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Implementazione dell'effetto accordione verticale con JavaScript nativo

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.

Ti potrebbe interessare