知识点：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. java版复利计算器升级

    github地址:https://github.com/iamcarson/Carson 伙伴:彭宏亮 学号:201406114148 与伙伴工作帅照: 本次升级的地方: 1.改善了界面显示,让界面整 ...

  2. android:inputType参数类型说明

    android:inputType参数类型说明 android:inputType="none"--输入普通字符 android:inputType="text" ...

  3. 2015年百度之星初赛(1) --- D KPI

    KPI Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  4. 可拖拽的ListBox

    之前在写播放器的时候,遇到了一个问题,现在播放器无论是千千,KuGoo还是比较原始的MediaPlayer,它们的播放表都是可以拖拽的,直接把文件拖到播放表实现歌曲的添加那个先暂且不说,光是播放表里面 ...

  5. ASP.NET使用UpdatePanel实现AJAX

    ScriptManager和UpdatePanel控件联合使用可以实现页面异步局部更新的效果.其中的UpdatePanel就是设置页面中异 步局部更新区域,它必须依赖于ScriptManager存在, ...

  6. asp.net mvc UpdateModel 更新对象后出现null

    在用asp.net mvc 4.0做项目的时候遇到的这种情况 在填写表单的时候,有一些表单没有填写,留空,然后直接post 提交表单,action中用UpdateModel 来更新model, 结果发 ...

  7. 重新想象 Windows 8 Store Apps (50) - 输入: 边缘手势, 手势操作, 手势识别

    [源码下载] 重新想象 Windows 8 Store Apps (50) - 输入: 边缘手势, 手势操作, 手势识别 作者:webabcd 介绍重新想象 Windows 8 Store Apps ...

  8. 实现GridView翻页并且实现CheckBox选中功能的保持

    在GridView与数据库进行绑定后,由得到的数据记录可能有许多条,以至一个页面无法容纳,这时需要进行多页显. 要实现分页显现,只要使用分页类 "PagedDataSource" ...

  9. 搭建spring的开发环境

    在eclipse中新建web项目,集成spring开发环境,把集成spring的过程描述如下, 1.从spring官网下载spring的jar包,我这里是spring4.1,下载的文件中包含了源码及文 ...

  10. 多准则决策模型-TOPSIS方法

    多准则决策–Multiple Criteria Decision Making 多准则决策–Multiple Criteria Decision Making 多准则决策是指在具有相互冲突.不可共度的 ...