标签：function 效果 hflag js 收起 btn 展开 hidediv

1.2实现动态展开收起效果js代码

<script type="text/javascript">
        window.onload=function () {//加载完毕
            var hidediv=document.getElementById('hpn'),
                btn=document.getElementById('btn'),
                hflag=1;//标记是否隐藏
            btn.onclick=function () {
                if (hflag) {//当前为收起状态，展开函数
                    hidediv.style.display="block";
                    btn.innerHTML="收起选项-";
                    hflag=0;
                }else {//当前为展开状态，收起函数
                     hidediv.style.display="none";
                     btn.innerHTML="展开选项+";
                     hflag=1;
                }    
            }
        }
</script>

 知识点：通过判断hflag是真（1）或是假（0）判断内容是展开还是收起状态，从而进行对应的操作。

使用jquery(1.9以下版本)实现相同的效果，代码如下

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script>
    $(function(){
        $("#btn").toggle(
            function(){
                $(this).text("收起选项-");
                $("#hpn").show();
            },
            function(){
                $(this).text("展开选项+");
                $("#hpn").hide();
            }
        )
    })
</script>

2.广告自动展开，定时收起效果

　　2.1 静态结构HTML代码

<div id="adv" class="adv">
        <img src="images/adv.jpg" alt="广告图">
</div>

　　2.2 实现动态展开和定时收起效果js代码

    function showadv() {//显示广告函数
        if(h<300){
            h+=5;
            adv.style.height=h+"px";
        }else{
            return;
        }
        setTimeout(showadv, 30);
    }
    showadv();//执行展开函数
    setTimeout(hideadv, 5000);//5秒后执行隐藏广告函数
    function hideadv() {//收起广告函数
        if(h>0){
            h-=5;
            adv.style.height=h+"px";
        }else{
            return;
        }
        setTimeout(hideadv, 30);
    }   

标签：function,效果,hflag,js,收起,btn,展开,hidediv
来源： https://www.cnblogs.com/tutuxiaya/p/15558970.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。