這篇文章將為大家詳細講解有關(guān)JS如何實現(xiàn)垂直手風(fēng)琴效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
超過10年行業(yè)經(jīng)驗,技術(shù)領(lǐng)先,服務(wù)至上的經(jīng)營模式,全靠網(wǎng)絡(luò)和口碑獲得客戶,為自己降低成本,也就是為客戶降低成本。到目前業(yè)務(wù)范圍包括了:成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè),成都網(wǎng)站推廣,成都網(wǎng)站優(yōu)化,整體網(wǎng)絡(luò)托管,微信小程序開發(fā),微信開發(fā),app軟件開發(fā),同時也可以讓客戶的網(wǎng)站和網(wǎng)絡(luò)營銷和我們一樣獲得訂單和生意!效果如下:
圖 (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){ //關(guān)閉上一個定時器 clearInterval(obj.timer); //管理定時器 obj.timer = setInterval(function(){ //定時器開關(guān) ,用來判斷是否定時定時器 var flag = true; //遍歷json for(var arrt in json){ //計算步長 步長 = 目標(biāo)位置 - 當(dāng)前位置 var step = (json[arrt] - parseInt(getStyle(obj,arrt))) / 5; //步長取整 step = step > 0 ? Math.ceil(step): Math.floor(step); //盒子移動: 盒子現(xiàn)在的位置 + 步長取整 obj.style[arrt] = parseInt(getStyle(obj,arrt)) + step + 'px'; //只要其中一個不滿足條件,就不停止定時器 if(parseInt(getStyle(obj,arrt)) != json[arrt]){ flag = false; } } //關(guān)閉定時器 if(flag){ clearInterval(obj.timer); //2秒后執(zhí)行回調(diào)函數(shù) setTimeout(function(){ //判斷是否有回調(diào)函數(shù),有endFn 再執(zhí)行回調(diào)函數(shù) endFn&&endFn(); },1000) } },20); } //獲得現(xiàn)在的樣式 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 = ["人的一生常處于抉擇之中,如:念哪一間大學(xué)?選哪一種職業(yè)?娶哪一種女子?……等等傷腦筋的事情。一個人抉擇力的有無,可以顯示其人格成熟與否。倒是哪些胸?zé)o主見的人,不受抉擇之苦。因為逢到需要決定的時候,他總是求詢別人說:'嘿,你看怎么做?'大凡能夠成大功業(yè)的人,都是抉擇力甚強的人。他知道事之成敗,全在乎已沒有人可以代勞,更沒有人能代你決定。在抉擇的哪一刻,成敗實已露出端倪。","生命,也許是宇宙之間唯一應(yīng)該受到崇拜的因素。生命的孕育、誕生和顯示本質(zhì)是一種無比激動人心的過程。生命像音樂和畫面一樣暗自挾帶著一種命定的聲調(diào)或血色,當(dāng)它遇到大潮的襲卷,當(dāng)它聽到號角的催促時,它會頓時抖擻,露出本質(zhì)的絢爛和激昂。當(dāng)然,這本質(zhì)更可能是卑污、懦弱、乏味的;它的主人并無選擇的可能。應(yīng)當(dāng)承認,生命就是希望。應(yīng)當(dāng)說,卑鄙和庸俗不該得意過早,不該誤認為它們已經(jīng)成功地消滅了高尚和真純。偽裝也同樣不能持久,因為時間像一條長河在滔滔沖刷,卑鄙者、奸商和俗棍不可能永遠戴著教育家、詩人和戰(zhàn)士的桂冠。在他們暢行無阻的生涯盡頭,他們的后人將長久地感到羞辱。","一位朋友談到他親戚的姑婆,一生從來沒有穿過合腳的鞋子,常穿著巨大的鞋子走來走去。兒子晚輩如果問她,她就會說:'大小鞋都是一樣的價錢,為什么不買大的?'每次我轉(zhuǎn)述這個故事,總有一些人笑得岔了氣。其實,在生活里我們會看到很多這樣的'姑婆'。沒有什么思想的作家,偏偏寫著厚重苦澀的作品;沒有什么內(nèi)容的畫家,偏偏畫著超級巨畫;經(jīng)常不在家的商人,卻有非常巨大的家園。許多人不斷地追求巨大,其實只是被內(nèi)在貪欲推動著,就好像買了特大號的鞋子,忘了自己的腳一樣。不管買什么鞋子,合腳最重要,不論追求什么,總要適可而止。","我崇拜高尚的生命的秘密。我崇拜這生命在降生、成長、戰(zhàn)斗、傷殘、犧牲時迸濺出的鋼花焰火。我崇拜一個活靈靈的生命在崇山大河,在海洋和大陸上飄蕩的自由。是的,生命就是希望。它飄蕩無定,自由自在,它使人類中總有一支血脈不甘于失敗,九死不悔地追尋著自己的金牧場。"]; 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>
關(guān)于“JS如何實現(xiàn)垂直手風(fēng)琴效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站bm7419.com,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章名稱:JS如何實現(xiàn)垂直手風(fēng)琴效果-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://bm7419.com/article0/ijcoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護、網(wǎng)站營銷、Google、動態(tài)網(wǎng)站、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容