javascript 特效实现(1)——展开选项和收起效果

知识点：javascript事件；判断当前展开收起状态；延迟执行setTimeout方法。

1.简单的展开和收起效果：

　　1.1 静态结构HTML代码分析

　　　　body包含最外层的div id="pn"和按钮 a id="btn" ,而包含div id="pn"包含一个p标签和div id="hpn"（展开和收起部分）

    
"pn" class="pn">
        
分类：全部 电影 电视剧 综艺
        
"hpn" class="hpn">
            
地区：大陆 香港 美国 韩国 法国 英国
            
类型：武侠 喜剧 冒险 战争 动画
            
时间：2016 2015 2014 2013 2012 2011 2010 
        
    
    "javascript:void(0);" id="btn" class="btn">展开选项+

注意：标签中 href 属性值 javascript:void(0) 可以防止点击链接跳转。

　　　　

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

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

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

 

 

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

　　2.1 静态结构HTML代码

"adv" class="adv">
        "images/adv.jpg" alt="广告图">

　　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);
    }   

 

转载于:https://www.cnblogs.com/web-HCJ/p/5571889.html