知识点：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. 在MVC视图的代码块中，直接输出文本，有几种方式？

    @{ <div>我爱IT,我是程序员,我骄傲---</div> <!--在C#代码块中,输出文本--> <!--1.0 使用Razor内置标签text--&g ...

  2. thread_Exchanger数据交换

    Exchanger 是一个同步辅助类,用于两个并发线程之间在一个同步点进行数据交换.  允许两个线程在某一个点进行数据交换. 可以视作双向的同步队列: 可应用于基因算法.流水线设计等场景 Exchan ...

  3. jquery.ajax 跨域请求webapi，设置headers

    解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现. 1.第一步 服务端 ...

  4. asp.net中绘制大数据量的可交互的图表

    在一个asp.net项目中要用到能绘制大数据量信息的图表,并且是可交互的(放大.缩小.导出.打印.实时数据),能够绘制多种图形. 为此进行了多方调查预研工作,预研过微软的MsChart图表组件.基于j ...

  5. 使用BOM 的window对象属性打开新窗口

    ★  示例1 要求:弹出新窗口,并向新窗口写入动态HTML代码 代码 <buttononclick="btnOpen()">打开新窗口</button> & ...

  6. WPF 实际国际化多语言界面

    前段时候写了一个WPF多语言界面处理,个人感觉还行,分享给大家.使用合并字典,静态绑定,动态绑定.样式等东西 效果图 定义一个实体类LanguageModel,实际INotifyPropertyCha ...

  7. LinkedList的实现源码分析

    LinkedList 以双向链表实现.链表无容量限制,但双向链表本身使用了更多空间,也需要额外的链表指针操作. 按下标访问元素--get(i)/set(i,e) 要悲剧的遍历链表将指针移动到位(如果i ...

  8. 常用SQL语句优化技巧

    除了建立索引之外,保持良好的SQL语句编写习惯将会降低SQL性能问题发生. ①通过变量的方式来设置参数 好:stringsql = "select * from people p where ...

  9. [mysql] 一次sql耗时高引发报警的分析和处理

    1.现象: 最近两天在每天的凌晨0:15-20分左右收到报警短息,报警内容: JDBC-SQL请求最近三分钟内平均耗时时间过高的报警,监控类型:SQL... 2.分析: 从现象来看 每天凌晨15分,可 ...

  10. spring mvc 框架搭建及详解

    现 在主流的Web MVC框架除了Struts这个主力 外,其次就是Spring MVC了,因此这也是作为一名程序员需要掌握的主流框架,框架选择多了,应对多变的需求和业务时,可实行的方案自然就多了.不 ...