下载:　　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. IE6完美解决fixed方法

    ie6对position:fixed不支持,网上有很多解决方法,有的在ie6,ie7上调试成功后,在ie8上又不好使,div层还是跟随滚动条浮 动:以下总结方法,在ie6,ie7,ie8上都调试成功, ...

  2. PowerDesigner 12.5 汉化破解完整版

    PowerDesigner 12.5 汉化破解完整版 分类: ⑦ 综合 2011-08-09 14:59 2979人阅读 评论(0) 收藏 举报 破解wizardsybasetoolsshell扩展 ...

  3. MATLAB学习拾遗

    1.坐标轴修饰 axis equal:axis([0,6,0,6]) 不修饰则为默认网格 grid on 2.不太漂亮的pretty命令 3. Laplace变换 syms t s a b f1=ex ...

  4. Android开发日志问题

    以前在Android开发中发现,日志打印好多,调试的时候各种加Log,之后就各种不删除,导致项目后期花大把时间删除日志打印. 学到一个好方法: 在所有尽可能高的父类里面加上一个常量 DEBUG ,一开 ...

  5. Using breakpad in cocos2d-x 3.2，dump信息收集

    作者:HU 转载请注明,原文链接:http://www.cnblogs.com/xioapingguo/p/4037268.html 一.基本步骤 1.生成转换工具 2.把breakpad加入到项目 ...

  6. 一个方便的shell命令，查看软件安装目录

    查看软件安装路径:whereis phpfind / -name nginx.configfind 查找 / 从根目录 -name 文件查找

  7. ios开发——实用技术篇&网络音频播放

    网络音频播放 在日常的iOS开发中,我们通常会遇到媒体播放的问题,XCode中已经为我们提供了功能非常强大的AVFoundation框架和 MediaPlayer框架.其中AVFoundation框架 ...

  8. hellogcc -100GDB技巧

    https://github.com/hellogcc/100-gdb-tips/blob/master/README.md

  9. 文件和目录之chmod和fchmod函数

    本篇博文内容摘自<UNIX环境高级编程>(第二版),仅作个人学习记录所用.关于本书可参考:http://www.apuebook.com/. 这两个函数使我们可以更改现有文件的访问权限: ...

  10. DOS 命令 attrib：修改文件属性

    有时候系统中病毒之后会把自己的所有文件的属性改为隐藏只读格式,如果手动修改的话太麻烦并且浪费时间,不如用 Attrib 命令试试. 步骤: 1:开始->运行,在里面输入 cmd,打开命令行界面: ...