下载:　　http://sc.chinaz.com/jiaoben/131112181390.htm

其它:　　http://sc.chinaz.com/tag_jiaoben/shijianzhou.html

效果:　　

html 代码:

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel="stylesheet" href="css/about.css">

 <style>

 .page { width:100%;background:#F0F0F0 url('img/dian2.png') repeat-x; }

 </style>

 <title>大事记jQuery时间轴</title>

 </head>

 <body>

 <div class="page">

 <div class="header">

 </div>

 <div class="box">

     <ul class="event_year">

         <li class="current"><label for="2013">2013</label></li>

         <li><label for="2012">2012</label></li>

     </ul>

     <ul class="event_list">

         <div>

             <h3 id="2013">2013</h3>

             <li>

             <span>5月26日</span>

             <p><span>站长之家专栏改版上线</span></p>

             </li>

                 <li>

             <span>4月</span>

             <p><span>站长工具旗下产品，超级监控上线</span></p>

             </li>

         </div>

         <div>

             <h3 id="2012">2012</h3>

             <li>

             <span>9月</span>

             <p><span>站长之家北京分公司成立</span></p>

             </li>

         </div>

     </ul>

     <div class="clearfix"></div>

     </div>

 </div>

 <script src="js/jquery.min_v1.0.js" type="text/javascript"></script>

 <script>

 $(function(){

     $('label').click(function(){

         $('.event_year>li').removeClass('current');

         $(this).parent('li').addClass('current');

         var year = $(this).attr('for');

         $('#'+year).parent().prevAll('div').slideUp(800);

         $('#'+year).parent().slideDown(800).nextAll('div').slideDown(800);

     });

 });

 </script>

 <div style="text-align:center;clear:both">

 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

 </div>

 </body>

 </html>

ok

【html】【19】高级篇--大事件时间轴的更多相关文章

  1. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  2. 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...

  3. 大数据系列博客之 --- 深入简出 Shell 脚本语言（高级篇）

    首先声明,此系列shell系列博客分为四篇发布,分别是: 基础篇:https://www.cnblogs.com/lsy131479/p/9914747.html 提升篇:https://www.cn ...

  4. 海康、大华NVR网络硬盘录像机录像无插件全平台访问实现—录像回放时间轴功能实现方法

    在之前的博文中我们有介绍方案*NVR硬件录像机web无插件播放方案(支持取特定时间段视频流)*:该片博文旨在介绍时间轴功能的实现和相关接口的调用: 时间轴样式展示: 问题分析 对于 时间轴的展示实现需 ...

  5. 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！

    前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...

  6. PHP笔记（PHP高级篇）

    高级篇中将涉及数据库的使用以及Cookie和Session会话,提高PHP的开发效率和运行效率 PHP程序员需要掌握的MySQL操作 为项目设计表 使用SQL语句 MySQL的目录结构 data目录中 ...

  7. SNF开发平台WinForm之十五-时间轴控件使用-SNF快速开发平台3.3-Spring.Net.Framework

    一.显示效果如下: 二.在控件库里选择UCTimeAxis 拖拽到窗体里. 三.加入以下代码,在load事件里进行调用就可以运行了. #region 给时间轴控件加载数据 private void U ...

  8. Xamarin XAML语言教程基础语法篇大学霸

    Xamarin XAML语言教程基础语法篇大学霸 前  言 Xamarin是一个跨平台开发框架.它可以用来开发iOS.Android.Windows Phone和Mac的应用程序.使用Xamarin框 ...

  9. redis学习笔记（详细）——高级篇

    redis学习笔记(详细)--初级篇 redis学习笔记(详细)--高级篇 redis配置文件介绍 linux环境下配置大于编程 redis 的配置文件位于 Redis 安装目录下,文件名为 redi ...

随机推荐

  1. 转载ASP.net 中 OutputCache 指令各个参数的作用

    使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...

  2. MVC产生验证码

    来源地址: http://www.cnblogs.com/insus/p/3629269.html

  3. CentOS6 配置

    1.CentOS6 Minimal 安装的情况下,默认网卡不启动,并且默认设置了依赖 NetworkManager 的选项.又因为 Minimal 安装并不会安装系统默认提供的网络管理工具  Netw ...

  4. 解决ecshop在线客户点击无法唤醒QQ问题

    找到default/library/page_footer.lbi中找到QQ代码的相应位置,然后你会发现之前模板里面为什么QQ点击不能对话,是因为QQ客服安装包中的JS代码有的可能是比较旧的代码了. ...

  5. MyBatis简介与配置MyBatis+Spring+MySql

    MyBatis学习 之 一.MyBatis简介与配置MyBatis+Spring+MySql MyBatis学习 之 二.SQL语句映射文件(1)resultMap MyBatis学习 之 二.SQL ...

  6. 【转】Android studio 导入github工程

    http://blog.csdn.net/feixiaku/article/details/45155587/ 从github下载两个开源项目: PagerSlidingTabStrip    |   ...

  7. 【转】placement new

    原文:http://www.cnblogs.com/wanghetao/archive/2011/11/21/2257403.html 1. placement new的含义placement new ...

  8. Codeforces Round #200 (Div. 1)D. Water Tree dfs序

    D. Water Tree Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/343/problem/ ...

  9. Asp.Net Mvc5 之Controller

    经过前面介绍了路由系统之后,我们知道任何一个请求在经过asp.net url路由系统的拦截之后,会生成以controller/action 名称为核心的路由数据.asp.net mvc 根据此解析出目 ...

  10. Android权限设置android.permission完整列表

    android.permission.ACCESS_CHECKIN_PROPERTIES允许读写访问"properties”表在checkin数据库中,改值可以修改上传( Allows re ...