                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /展開與收起效果

為何本節(jié)代碼在360瀏覽器中預(yù)覽會有卡頓現(xiàn)象，而在谷歌瀏覽器中就能平滑滾動呢？

<!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>自動展開</title>
????<style?type="text/css">
????????body
????????{
????????????margin:?0?auto;
????????????padding:?0;
????????}
????????a:focus
????????{
????????????outline:?none;
????????}
????????
????????#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">
???????
????
????????
????????//增加高度函數(shù)addH()
????????var?h?=?0;????
????????function?addh()?{??
???????????if(h<300){
???????????????h?+=?5;
???????????????document.getElementById('pn').style.height=h?+'px';
???????????}else{
???????????????return;
???????????}
		setTimeout('addh()',30);
????????}
????????
???????//網(wǎng)頁加載完畢時，調(diào)用增加高度函數(shù)addH()，等待5秒鐘后調(diào)用減少高度函數(shù)subh()。?
????????window.onload=function(){
????????????addh();
????????????setTimeout('subh()',3000);
????????}
??????
??????
??????//?減少高度函數(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>
????????????歡迎來到慕課網(wǎng)</h1>
????????<h2>
????????????大幅廣告</h2>
????</div>
????<p?class="slide">
????????慕課網(wǎng)歡迎你</p>
</body>
</html>