内容的展开与收起效果

大幅广告的展开与收起：
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>展开与收起效果</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 730px;
            margin: auto;
        }
        #banner{
            height: 336px;
            overflow: hidden;
        }

        p{
            line-height: 30px;
            text-align: center;
        }
    </style>

    <script>
        var h=0;
        function addH(){
            var banner=document.getElementById('banner')
            if(h<336){
                h+=10
                banner.style.height=h+'px'
            }else{
                return
            }
            setTimeout(addH,50)
        }
        window.onload=function(){
            addH();
        }
        function removeH(){
            var banner=document.getElementById('banner')
            if(h>0){
                h-=10
                banner.style.height=h+'px'
            }else{
                // banner.style.display='none'
                return
            }
            setTimeout(removeH,50)
        }
        window.onload=function(){
            addH();
            setTimeout(removeH,5000)
        }
    </script>
</head>
    <div id='banner'><img src='images/1.jpg'></div>
    <p>正文</p>

<body>

</body>

</html>
View Code