下载:　　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. windows程序员进阶系列：《软件调试》之堆 （一）

    windows程序员进阶系列:<软件调试>之堆 (一) 堆是软件在运行时动态申请内存空间的主要途径.从堆上申请来的空间需要程序员自己申请和释放,且申请和释放操作必须绝对匹配.忘记释放或者多 ...

  2. bzoj3261 可持久化trie

    容易想到题解. 总结一下区间异或和题: 1.转化成trie 2.注意空间稍微开大 3.不要一个数右移31位 4.考虑开头要不要插一个零 5.注意可持久get的时候区间是左开右闭,但这样会变成x-2,x ...

  3. 去ECSHOP版权，去官方后门

    ECShop是一款B2C独立网店系统,适合企业及个人快速构建个性化网上商店.系统开源但不免费,是基于PHP语言及MYSQL数据库构架开发的跨平台开源程序.目前最新版本为2.7.3 0708版.1.首先 ...

  4. 授予普通域用户远程桌面连接DC/客户端权限

    普通域用户通过远程桌面登录DC: 1)将该用户加入到 Remote Desktop Users 组中

  5. 并发与同步 (一) ThreadLocal与Synchronized 用哪一个好

    ThreadLocal是什么? 历史 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以 ...

  6. 在iOS中怎样创建可展开的Table View?(上)

    原文地址 本文作者:gabriel theodoropoulos 原文:How To Create an Expandable Table View in iOS 原文链接 几乎所有的app都有一个共 ...

  7. Linux下文件描述符

    http://blog.csdn.net/kumu_linux/article/details/7877770 文件描述符是一个简单的整数,用以标明每一个被进程所打开的文件和socket.第一个打开的 ...

  8. highcharts js报表工具(报表插件)

    highcharts报表工具(报表插件.图表工具) highcharts效果在线演示(可查看源代码):  http://www.hcharts.cn/demo/index.php?p=56 Highc ...

  9. Route Filters

    Route Filters The Controller's Middleware, represents a High-Level processing API, executed by the r ...

  10. ubuntu 13.04 root权限设置方法详解

    很多朋友安装升级Ubuntu 13.04之后不知道ubuntu 13.04 root权限设置的具体方法,今天这篇文章就将为大家详细介绍设置root权限的步骤,新手朋友可以来看一看哦~ Ubunto 1 ...