課程
/前端開(kāi)發(fā)
/JavaScript
/展開(kāi)與收起效果
跟著敲了一遍 ,怎么不行啊啊啊啊啊啊
2016-12-04
源自:展開(kāi)與收起效果 3-2
正在回答
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />??? <title>自動(dòng)展開(kāi)</title>??? <style type="text/css">??????? body??????? {??????????? margin: 0 auto;??????????? padding: 0;??????? }??????? #pn??????? {??????????? background: #e8e8e8;??????????? height: 120px;??????????? width: auto;??????????? display: block;??????????? margin: 0 auto;??????????? padding: 5px;??????????? text-align: center;?????? ??? ?overflow:hidden;??????? }??????? .slide??????? {??????????? padding: 10px;??????????? width: 960px;??????????? margin: 0 auto;??????????? background: gray;??????????? text-align: center;??????????? height: 40px;??????????? line-height: 40px;??????????? color: #fff;??????? }??? </style>??? <script type="text/javascript">??????? var h=0;??????? function addh() { ???????????? if(h<300){??????????????? h +=5;??????????????? document.getElementById('pn').style.height=h+'px';??????????? }??????????? else{??????????????? return;??????????? }??????????? setTimeout("addh()",30);??????? }?????? ??????? //網(wǎng)頁(yè)加載完畢時(shí),調(diào)用增加高度函數(shù)addH(),等待5秒鐘后調(diào)用減少高度函數(shù)subh()。 ??????? window.onload=function(){??????????? addh();??????????? setTimeout("subh()",5000);??????? }???? ????? ?????? // 減少高度函數(shù)subH()??????? function subh() {??????????? if(h>0){??????????????? h -= 5;??????????????? document.getElementById('pn').style.height=h+'px';??????????? }else{??????????????? document.getElementById('pn').style.display='none';??????????????? return;??????????? }??????????? setTimeout("subh()",30);??????? } ??? </script></head><body>??? <div id="pn">??????? <h1>??????????? 歡迎來(lái)到慕課網(wǎng)</h1>??????? <h2>??????????? 大幅廣告</h2>??? </div>??? <p class="slide">??????? 慕課網(wǎng)歡迎你</p></body></html>
你再仔細(xì)對(duì)照一下代碼,看是不是有哪里出錯(cuò)了
舉報(bào)
通過(guò)效果展示與案例分析,教您實(shí)現(xiàn)不同類(lèi)型的展開(kāi)與收起效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-12-05
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
??? <title>自動(dòng)展開(kāi)</title>
??? <style type="text/css">
??????? body
??????? {
??????????? margin: 0 auto;
??????????? padding: 0;
??????? }
??????? #pn
??????? {
??????????? background: #e8e8e8;
??????????? height: 120px;
??????????? width: auto;
??????????? display: block;
??????????? margin: 0 auto;
??????????? padding: 5px;
??????????? text-align: center;
?????? ??? ?overflow:hidden;
??????? }
??????? .slide
??????? {
??????????? padding: 10px;
??????????? width: 960px;
??????????? margin: 0 auto;
??????????? background: gray;
??????????? text-align: center;
??????????? height: 40px;
??????????? line-height: 40px;
??????????? color: #fff;
??????? }
??? </style>
??? <script type="text/javascript">
??????? var h=0;
??????? function addh() { ?
??????????? if(h<300){
??????????????? h +=5;
??????????????? document.getElementById('pn').style.height=h+'px';
??????????? }
??????????? else{
??????????????? return;
??????????? }
??????????? setTimeout("addh()",30);
??????? }
?????? ?
?????? //網(wǎng)頁(yè)加載完畢時(shí),調(diào)用增加高度函數(shù)addH(),等待5秒鐘后調(diào)用減少高度函數(shù)subh()。
??????? window.onload=function(){
??????????? addh();
??????????? setTimeout("subh()",5000);
??????? }???? ?
???? ?
????? // 減少高度函數(shù)subH()
??????? function subh() {
??????????? if(h>0){
??????????????? h -= 5;
??????????????? document.getElementById('pn').style.height=h+'px';
??????????? }else{
??????????????? document.getElementById('pn').style.display='none';
??????????????? return;
??????????? }
??????????? setTimeout("subh()",30);
??????? }
??? </script>
</head>
<body>
??? <div id="pn">
??????? <h1>
??????????? 歡迎來(lái)到慕課網(wǎng)</h1>
??????? <h2>
??????????? 大幅廣告</h2>
??? </div>
??? <p class="slide">
??????? 慕課網(wǎng)歡迎你</p>
</body>
</html>
2016-12-05
你再仔細(xì)對(duì)照一下代碼,看是不是有哪里出錯(cuò)了