這篇文章將為大家詳細講解有關JS如何實現垂直手風琴效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
效果如下：
圖 （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">
<h5 class="panel-title" id="panel-title">1 《抉擇》</h5>
<div class="collapse" id = "One"><p></p></div>
<h5 class="panel-title" id="panel-title">2 《生命》</h5>
<div class = "collapse" id="Tow"><p></p></div>
<h5 class="panel-title" id="panel-title">3 《大小》</h5>
<div class = "collapse" id="Three"><p></p></div>
<h5 class="panel-title" id="panel-title">4 《崇拜》</h5>
<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 ? 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 panel = document.getElementById("panel");
var oH = panel.getElementsByTagName('h5');
var oDiv = panel.getElementsByTagName('div');
var str = ["人的一生常處于抉擇之中，如：念哪一間大學？選哪一種職業？娶哪一種女子？……等等傷腦筋的事情。一個人抉擇力的有無，可以顯示其人格成熟與否。倒是哪些胸無主見的人，不受抉擇之苦。因為逢到需要決定的時候，他總是求詢別人說：'嘿，你看怎么做？'大凡能夠成大功業的人，都是抉擇力甚強的人。他知道事之成敗，全在乎已沒有人可以代勞，更沒有人能代你決定。在抉擇的哪一刻，成敗實已露出端倪。","生命，也許是宇宙之間唯一應該受到崇拜的因素。生命的孕育、誕生和顯示本質是一種無比激動人心的過程。生命像音樂和畫面一樣暗自挾帶著一種命定的聲調或血色，當它遇到大潮的襲卷，當它聽到號角的催促時，它會頓時抖擻，露出本質的絢爛和激昂。當然，這本質更可能是卑污、懦弱、乏味的;它的主人并無選擇的可能。應當承認，生命就是希望。應當說，卑鄙和庸俗不該得意過早，不該誤認為它們已經成功地消滅了高尚和真純。偽裝也同樣不能持久，因為時間像一條長河在滔滔沖刷，卑鄙者、奸商和俗棍不可能永遠戴著教育家、詩人和戰士的桂冠。在他們暢行無阻的生涯盡頭，他們的后人將長久地感到羞辱。","一位朋友談到他親戚的姑婆，一生從來沒有穿過合腳的鞋子，常穿著巨大的鞋子走來走去。兒子晚輩如果問她，她就會說：'大小鞋都是一樣的價錢，為什么不買大的？'每次我轉述這個故事，總有一些人笑得岔了氣。其實，在生活里我們會看到很多這樣的'姑婆'。沒有什么思想的作家，偏偏寫著厚重苦澀的作品;沒有什么內容的畫家，偏偏畫著超級巨畫;經常不在家的商人，卻有非常巨大的家園。許多人不斷地追求巨大，其實只是被內在貪欲推動著，就好像買了特大號的鞋子，忘了自己的腳一樣。不管買什么鞋子，合腳最重要，不論追求什么，總要適可而止。","我崇拜高尚的生命的秘密。我崇拜這生命在降生、成長、戰斗、傷殘、犧牲時迸濺出的鋼花焰火。我崇拜一個活靈靈的生命在崇山大河，在海洋和大陸上飄蕩的自由。是的，生命就是希望。它飄蕩無定，自由自在，它使人類中總有一支血脈不甘于失敗，九死不悔地追尋著自己的金牧場。"];
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>關于“JS如何實現垂直手風琴效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
