English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
效果如下：
图 （1） 展开前
图 （2） 展开后
代码如下：
<!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){
//fechar o último temporizador
clearInterval(obj.timer);
//gerenciar temporizador
obj.timer = setInterval(function(){
//chave do temporizador, usada para julgar se o temporizador está ativo
var flag = true;
//percorrer json
for(var arrt in json){
//calcular o passo passo = posição de destino - posição atual
var step = (json[arrt] - parseInt(getStyle(obj,arrt))) / 5;
//arredondar o passo
step = step > 0 ? Math.ceil(step): Math.floor(step);
//movimento da caixa: posição atual da caixa + arredondar o passo
obj.style[arrt] = parseInt(getStyle(obj,arrt)) + step + 'px';
//se qualquer um não atender aos requisitos, não parar o temporizador
if(parseInt(getStyle(obj,arrt)) != json[arrt]){
flag = false;
}
}
//fechar o temporizador
if(flag){
clearInterval(obj.timer);
//2segundos após a execução da função de callback
setTimeout(function(){
//julgar se há função de callback, se houver endFn, execute a função de callback
endFn&&endFn();
},1000)
}
},20);
}
//obter o estilo atual
function getStyle(obj,arrt){
//compatível com o ie
return obj.currentStyle?obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
}
var panel = document.getElementById("panel");
var oH = panel.getElementsByTagName('h'4);
A vida de uma pessoa está frequentemente em escolhas, como: qual faculdade frequentar? Qual profissão escolher? Qual mulher casar? ... e muitos outros assuntos que dão dor de cabeça. A presença ou ausência da capacidade de escolher pode mostrar o grau de maturidade da personalidade. No entanto, aqueles que não têm uma opinião própria não sofrem com as escolhas. Porque quando é necessário tomar uma decisão, eles sempre perguntam aos outros: 'Ei, você acha que o que fazer?' Quem pode realizar grandes feitos são aqueles com uma forte capacidade de escolha. Ele sabe que o sucesso ou fracasso das coisas depende de ninguém para fazer por ele, e ninguém pode decidir por você. No momento da escolha, o sucesso ou fracasso já revelou pistas. ", A vida, talvez seja o único fator que deve ser cultuado no universo. O nascimento, o desenvolvimento e a manifestação da essência da vida é um processo muito emocionante. A vida, como música e pintura, traz uma tonalidade ou cor determinada, quando encontra a onda de mar, quando ouve o som do clarim, ela se agita imediatamente, revelando a brilho e a excitação da essência. Claro, essa essência pode ser desonesta, fraca, trivial; o dono dela não tem a possibilidade de escolher. Deve-se reconhecer que a vida é esperança. Deve-se dizer que a desonestidade e a trivialidade não devem se comover cedo, não devem ser consideradas como tendo destruído a nobreza e a pureza com sucesso. A máscara também não pode durar muito, porque o tempo é um rio que corre, os desonestos, os mercenários e os vulgares não podem sempre usar a coroa de educadores, poetas e soldados. No final de suas vidas livres, seus descendentes sentirão vergonha por muito tempo. ", Um amigo falou sobre a tia-moça de sua tia, que nunca usou sapatos que cabem bem, sempre caminhando com sapatos enormes. Se os filhos e netos perguntarem a ela, ela dirá: 'Os sapatos grandes e pequenos têm o mesmo preço, por que não comprar os grandes?' Cada vez que eu conto essa história, algumas pessoas riam até chorar. De fato, na vida, podemos ver muitos desses 'tia-moças'. Não há pensamento em escritores que escrevem obras densas e amargas; não há conteúdo em pintores que pintam gigantescas pinturas; comerciantes que não estão em casa frequentemente têm uma casa muito grande. Muitas pessoas buscam grandiosidade, mas na verdade são movidas por um desejo interno, como comprar sapatos enormes e esquecer seus pés. independentemente do que comprar, o mais importante é que sejam confortáveis. independentemente do que perseguir, é sempre bom saber parar. ", Eu admiro o segredo da vida nobre. Eu admiro a chama de aço que estoura ao nascer, crescer, lutar, ferir, sacrificar. Eu admiro a liberdade de um espírito vivo flutuando nas montanhas, rios, oceanos e continentes. Sim, a vida é esperança. Ela flutua sem destino, livremente, ela faz com que haja sempre uma corrente de sangue nos humanos que não se conformam com a derrota, perseguindo seus próprios campos de ouro com nove vidas em vão. "],
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];
}else{
animate(oDiv[this.index],{height:0});
}
}
}
</script>
</html>
Isso é tudo o que há no artigo. Esperamos que o conteúdo deste artigo ajude você a aprender ou trabalhar. Também esperamos que você dê mais suporte ao tutorial Yell!
Declaração: o conteúdo deste artigo é extraído da internet, pertencendo ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos de propriedade, não realiza edição humana e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violar direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Apenas após verificação, o site deletará imediatamente o conteúdo suspeito de infringir direitos autorais.)