知识点：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. 使用Windows PE的U盘安装win7

    前年刚去公司的时候用PE装过好多系统,最近又装一台华硕的,碰到了一个问题,一起记录了下. 华硕X45,Bios已经改为U盘启动了,但就是进不去,因为知道可能还有个选磁盘启动项的键,找了半天原来按Esc ...

  2. ExtJs4 笔记（4） Ext.XTemplate 模板

    ExtJs4 笔记(4) Ext.XTemplate 模板 摘自:http://www.cnblogs.com/lipan/ 本篇将涉及到ExtJs中一个重要的概念,模板.话说Razor很神奇,但是我 ...

  3. 雷军V5，米3横空出世

    小米3 下午两点,小米CEO:雷军(也是一个传奇人物),虽然没购买门票,只是自己一个人看微博,看新闻,还是了解到了小米3的面貌,这次雷哥还给大家带来了MITV,售价￥2999!(无法相信)顶配.这次我 ...

  4. Python Import 详解

    http://blog.csdn.net/appleheshuang/article/details/7602499 一 module通常模块为一个文件,直接使用import来导入就好了.可以作为mo ...

  5. 才知道百度也提供了智能DNS服务 - 加速乐

    http://jiasule.baidu.com/ 智能DNS 依托百度多年积累的高精度DNS识别库,平均只需5秒全球DNS服务器全部生效,百度蜘蛛1秒生效.抗攻击.无限解析记录,免费支持电信.联通. ...

  6. [小北De编程手记] : Lesson 01 - Selenium For C# 之 环境搭建

    在我看来一个自动化测试平台的构建,是一种很好的了解开发语言,单元测试框架,自动化测试驱动,设计模式等等等的途径.因此,在下选择了自动化测试的这个话题来和大家分享一下本人关于软件开发和自动化测试的认识. ...

  7. android onNewIntent

    在Android应用程序开发的时候,从一个Activity启动另一个Activity并传递一些数据到新的Activity上非常简单,但是当您需要让后台运行的Activity回到前台并传递一些数据可能就 ...

  8. 单例（Singleton pattern）模式的七种写法

    转载请注明出处:http://www.cnblogs.com/smbk/ One: public class Singleton { private static Singleton instance ...

  9. RHEL7文件归档与压缩

    本文介绍RHEL7.2文件的归档和压缩 文件归档 归档的好处:方便使用.查询.阅读,易于管理 (批量删除文件) 常用操作 命令:tar 作用:将许多文件一起保存至一个单独的磁带或磁盘归档,并能从归档中 ...

  10. Device Channels in SharePoint 2013

    [FROM:http://blog.mastykarz.nl/device-channels-sharepoint-2013/] One of the new features of SharePoi ...