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

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

　　1.1 静态结构HTML代码分析

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

<body>

    <div id="pn" class="pn">

        <p>分类：全部 电影 电视剧 综艺</p>

        <div id="hpn" class="hpn">

            <p>地区：大陆 香港 美国 韩国 法国 英国</p>

            <p>类型：武侠 喜剧 冒险 战争 动画</p>

            <p>时间：       </p>

        </div>

    </div>

    <a href="javascript:void(0);" id="btn" class="btn">展开选项+</a>

</body>

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

　　　　

　　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="data: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);

    }

javascript 特效实现(1)——展开选项和收起效果的更多相关文章

  1. javascript特效实现(4)——当前时间和倒计时效果

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...

  2. 10种JavaScript特效实例让你的网站更吸引人

    我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预 ...

  3. JavaScript特效源码(1、文字特效)

    注:本文以及以下关于Javascript特效源码都是分享自JavaScript源码大全. 1.逐隐逐现的的特效 逐隐逐现的文字特效[推荐使用][适用于IE4++] (修改显示的文字后根据说明进行共2步 ...

  4. ExpandableListView实现展开更多和收起更多

    [需求]: 如上面图示 当点开某个一级菜单的时候,其他菜单收起: 子级菜单默认最多5个: 多于5个的显示"展开更多" 点击"展开更多",展开该级所有子级菜单,同 ...

  5. JavaScript特效（调试笔记）

    JavaScript特效 一.在网页上显示当前的时间日期,例如:“2016年3月26日 星期六”. js源代码: function getTime() { var today = new Date() ...

  6. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  7. Javascript特效代码大全(420个)（转）

    转载自:Javascript特效代码大全(420个) 收集资料,以便使用+面试+学习  ├ Cookie脚本 ├ 随访问次数变提示 ├ 集成Cookies ├ 使窗口仅弹出一次 ├ 签名提示程序 ├ ...

  8. WPF中TreeView单击展开其子元素以及点击一个元素展开其他元素收起

    TreeView单击展开其子元素: 在WPF的TreeView控件中,要想展开它的子元素,我们必须要鼠标左键点两下或者右键点一下,那么我们怎样实现左键点一下就使它展开呢? Xaml: <Grid ...

  9. 【JavaScript】在同一个网页中实现多个JavaScript特效

    在网页中,假设出现两次<script type="text/javascript"></script>标签,全部的JavaScipt脚本都不会再生效,仅仅能 ...

随机推荐

  1. Scrum1.2--spring计划

    项目功能--深入分析  燃尽图

  2. 0525Sprint回顾

    1.回顾组织 主题:“我们下次怎么样才能更加认真对待?” 时间:设定为1至2个小时. 参与者:整个团队. 场所:能够在不受干扰的情况下讨论. 秘书:指定某人当秘书,筹备.记录.整理.  2.回顾流程 ...

  3. 概率论 --- Uva 11181 Probability|Given

    Uva 11181 Probability|Given Problem's Link:   http://acm.hust.edu.cn/vjudge/problem/viewProblem.acti ...

  4. C#开发的高性能EXCEL导入、导出工具DataPie（支持MSSQL、ORACLE、ACCESS，附源码下载地址）[转]

    转自:http://www.cnblogs.com/yfl8910/archive/2012/05/19/2509194.html 作为财务数据核算人员,面对大量的业务与财务数据,借助于传统的EXCE ...

  5. WPF 中获取DataGrid 模板列中控件的对像

    WPF 中获取DataGrid 模板列中控件的对像 #region 当前选定行的TextBox获得焦点 /// <summary> /// 当前选定行的TextBox获得焦点 /// &l ...

  6. 使用栈Stack对整数数值的运算表达式字符串进行运算C#

    这里如果对于形如字符串“((6+((7+8)-9)*9+8/2)-3)/2”的运算表达式进行运算.接触过此类的同学知道这种存在着运算符优先级的表达式,不能直接从左到右进行运算,我们使用OperandS ...

  7. sql:MySQL 6.7 表,视图,存储过程结构查询

    #数据库MySQL 6.7 use sakila; #查询表名 show tables; # SELECT TABLE_NAME,TABLE_ROWS FROM INFORMATION_SCHEMA. ...

  8. 如何高效部署前端代码，如css，js...

    看了网上一些文章,做了点总结,顺便再加点自己的东西,简单的说下. 1.利用浏览器的304缓存,但是304叫协商缓存,还是需要与服务器通信一次 2.强制使用浏览器使用本地缓存(cache-control ...

  9. Unsupervised Classification - Sprawl Classification Algorithm

    Idea Points (data) in same cluster are near each others, or are connected by each others. So: For a ...

  10. 【iOS】通知监听

    下例为:监听文本框  accountField  内容的改变, 当发生改变时, 调用textChange方法(多次).监听结束需要移除通知. - (void)viewDidLoad { [super ...