知识点：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. BAT及各大互联网公司前端笔试面试题--Html,Css篇

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...

  2. C#中override和new修饰符的区别

    (new)“隐藏”,(override)“覆盖”(重写).不过要弄清楚这两个有什么区别确实也很难,因为子类在使用父类方法时根本看不出区别,子类不管父类是new了还是override了,用的都是父类方法 ...

  3. Unity3D入门基本概念整理

    1. (1)在场景中添加资源 只需单击工程视图 (Project View) 中的网格(Mesh)并拖动至层级视图 (Hierarchy) 或场景视图 (Scene View),便可将其添加至场景 ( ...

  4. WPF中实现自定义虚拟容器(实现VirtualizingPanel)

    WPF中实现自定义虚拟容器(实现VirtualizingPanel) 在WPF应用程序开发过程中,大数据量的数据展现通常都要考虑性能问题.有下面一种常见的情况:原始数据源数据量很大,但是某一时刻数据容 ...

  5. csharp: SDK：CAPICOM

    http://www.microsoft.com/zh-cn/download/details.aspx?id=25281 //************************************ ...

  6. linux下socket编程

    相关结构 //下边这两个结构定义在<sys/types.h>里 //一般的地址结构,只能用于覆盖(把其他地址转换为此类型),且只能引用该地址的sa_family字段 struct sock ...

  7. 利用PBfunc在Powerbuilder中使用https获取微信的AccessToken

    在前篇中讲解了使用PBFunc在Powerbuilder自己进行http的GET和POST操作. 本篇简单用代码演示下https的微信AccessToken的获取: n_pbfunc_http lnv ...

  8. 基于 ANSIBLE 自动化运维实践

    摘要:运维这个话题很痛苦,你做任何的产品都离不开运维.不管你用什么语言.什么平台.什么技术,真正能够决定你产品成熟度的很有可能就是你运维的能力.取自 云巴 CEO 张虎在 ECUG 大会上的分享. 云 ...

  9. ahjesus Unity3D XML注释被编译的问题

    public class XMLStringReader : MonoBehaviour { public string slectedItem; private bool editing = fal ...

  10. IIS在默认情况并不支持对PUT和DELETE请求的支持

    IIS在默认情况并不支持对PUT和DELETE请求的支持: IIS拒绝PUT和DELETE请求是由默认注册的一个名为:“WebDAVModule”的自定义HttpModule导致的.WebDAV的全称 ...