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="Two"><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){
//前のタイマーを閉じる
clearInterval(obj.timer);
//タイマーを管理する
obj.timer = setInterval(function(){
//タイマースイッチ、タイマーが設定されているかどうかを判断するために使用されます
var flag = true;
//jsonを巡回する
for(var arrt in json){
//ステップ長を計算する ステップ長 = 目標位置 - 現在位置
var step = (json[arrt] - parseInt(getStyle(obj,arrt))) / 5;
//歩長を四捨五入する
step = step > 0 &63; Math.ceil(step): Math.floor(step);
//ボックスの移動: ボックスの現在の位置 + 歩長を四捨五入する
obj.style[arrt] = parseInt(getStyle(obj,arrt)) + step + 'px';
//どれか一つでも条件を満たさない場合、タイマーを停止しない
if(parseInt(getStyle(obj,arrt)) != json[arrt]){
flag = false;
}
}
//タイマーを閉じる
if(flag){
clearInterval(obj.timer);
//2秒後にコールバック関数を実行する
setTimeout(function(){
//コールバック関数があるかを判断し、endFnがあればコールバック関数を実行する
endFn&&endFn();
},1000)
}
},20);
}
//現在のスタイルを取得する
function getStyle(obj,arrt){
//対応IE
return obj.currentStyle? obj.currentStyle[arrt] : getComputedStyle(obj,null)[arrt];
}
var oDiv = panel.getElementsByTagName('div');
私は高尚な生命の秘密を崇拝しています。この生命が誕生、成長、戦い、負傷、犠牲を経験する際に放たれる鋼花炎を崇拝しています。崇山峻嶽、大河、海と大陸で自由に漂う活気ある生命を崇拝しています。はい、生命は希望です。それは自由自在に漂い、無限の自由を持っています。それは人類の中で、失敗を甘受しない一筋の血を持ち、金の牧場を追い求めることを決して諦めない人々を持ちます。4一位の友人は、彼の親戚の姑婆について話しました。一生、合う靴を履くことができなかった、大きな靴を歩き回る姑婆でした。息子や孫が彼女に尋ねると、彼女は「大きい靴も小さい靴も同じ価格ですから、なぜ大きな靴を買わないの？」と言います。この話を伝えるたびに、笑いが飛び交います。しかし、実際には、生活の中で多くのこのような「姑婆」を見ることができます。考えもしない作家が重厚な苦悶の作品を書く；内容もない画家が巨大な絵画を描く；家にいない商人が巨大な家を持っています。多くの人々は巨大なものを追い求めていますが、実は内在する欲が彼らを動かしているだけです。まるで特大号の靴を買って、自分の足を忘れたかのようです。どんな靴を買おうとも、合うことが一番重要です。どんなものを追い求めても、適切なところで止めることが大切です。
生命は、宇宙の中で唯一崇拝されるべき要素かもしれません。生命の妊娠、誕生、本質を示すことは、非常に感動的なプロセスです。生命は音楽や絵画のように、運命の声調や血色を秘めています。それが大潮に襲われるとき、号角の促しを聞くとき、それは瞬時に奮い立って、本質の輝きと激昂を露わにします。もちろん、その本質は卑劣、卑怯、退屈かもしれません。その所有者は選択する可能性がありません。生命は希望であると認めるべきです。卑劣や俗っぽさは早すぎる喜びを得ず、高尚や純粋を成功したと誤解すべきではありません。偽装も長続きしません。なぜなら、時間は長い川のように流れ続け、卑劣者、悪商、俗人たちは教育家、詩人、戦士の冠を常に被ることはできません。彼らの自由な生涯の終わりに、彼らの後人は長く恥ずかしいと感じるでしょう。
人的一生常处于選択のうちにあり、例えば：どの大学に進むべきか？どのような職業を選ぶべきか？どのような女性を選ぶべきか？……など、頭を悩ますことが多い。一人の選択力の有無は、その人格が成熟しているかどうかを示すことができる。逆に、主見がない人々は選択の苦しみに耐えられない。なぜなら、決定を必要とする時に、彼らは常に他人に尋ねる。「うーん、どうするべきか？」と。大抵、大成功を収めることができる人々は、選択力が非常に強い人々である。彼らは、事の成否が誰も代わりにやることはできない、更に誰も決定を代行することはできないと知っている。選択の瞬間に、成否はすでに端緒を露わにしている。
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){
}210oDiv[this.index].children[0].innerHTML = str[this.index];
else{
}
animate(oDiv[this.index],{height:0});
}
}
}
</script>
</html>
これでこの記事のすべての内容が終わります。この記事の内容が皆様の学習や仕事に少しでも役立つことを願っています。また、ナイアラ教程のサポートをたくさんお願いします！
声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードした内容であり、このサイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑われる内容があれば、メールで：notice#wまでご連絡ください。3codebox.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がとりたいと、このサイトは即座に侵害を疑われるコンテンツを削除します。）