下载:　　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. [威客任务]￥800.00 JS实现网站联动三级选项

    任务地址:http://task.zhubajie.com/3275832/ 具体要求: 要求1) 选单样式参照附件2) 点击第一个选项内容后,跳出第二个选项栏位,并自动更新选项内容3) 点击第二个选 ...

  2. hbase多用户入库，regionserver下线问题

    近期对hbase多用户插入数据时,regionserver会莫名奇妙的关闭,regionserver的日志有很多异常: 如下: org.apache.hadoop.hbase.DroppedSnaps ...

  3. linux ssh 配置 添加用户 另外一种方法

    [root@localhost ~]# vi /etc/pam.d/sshd #%PAM-1.0auth       required     pam_stack.so service=system- ...

  4. virtualbox 创建com对象失败

    其实这个错误是因为VirtualBox不兼容Win7引起的,只要把VirtualBox的兼容模式改为出Win7以外的就行了.. 右键VirtualBox的桌面快捷方式,选择属性,选到兼容性选项卡,勾选 ...

  5. centos上安装jdk环境

    老沙采用的环境是centos 6.5 64位服务器.在linux上安装jdk环境都很多中方式,这里讲解下手工进行安装并进行环境变量配置. 首先需要下载一个64位版本的linux,可以去oracle官网 ...

  6. js防刷新的倒计时

    近期在维护考试系统,在进行考试測试时无意中点击了刷新button.可是上面的倒计时并没有受到影响.同一时候在几篇博客中也有这种样例,所以我想看看它究竟是如何防止刷新的. 假设是用cs代码写.我们可能会 ...

  7. hdu 5443 The Water Problem 线段树

    The Water Problem Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php? ...

  8. [React Fundamentals] Development Environment Setup

    In this lesson we'll setup a simple build process for converting our ES6 React components into ES5 u ...

  9. 基于反射实现自己主动化restful开发

    [Author]: kwu 基于反射实现自己主动化restful开发,通用的仅仅须要写查询数据库的sql.并增加相应的javabean实现的高速restful服务的开发. 1.编写数据库的查询sql. ...

  10. Helpers\Assets

    Helpers\Assets The assets helper is for loading CSS and JS files rather than writing out the full sc ...