下载:　　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. angular ui-route

    http://www.cnblogs.com/freeliver54/p/4488141.html

  2. NGUI学习笔记（四）：动态加载UI和NGUI事件

    动态加载UI 我们进入一个场景后,如果将这个场景所有可能用到的UI都直接放在场景中做好,由于要在进入场景时就部署好所有的UI对象,那么当UI对象较多时会碰到的问题是:1.初始化场景会产生非常明显的卡顿 ...

  3. Winform- 界面开发之布局控件"WeifenLuo.WinFormsUI.Docking"的使用

    布局控件"WeifenLuo.WinFormsUI.Docking"是一个非常棒的开源控件,用过的人都深有体会,该控件之强大.美观.不亚于商业控件.而且控件使用也是比较简单的. 实 ...

  4. eclipse反编译插件

    eclipse翻译的插件很多,jadclipse 是其中一款.设置很简单. ①.下载net.sf.jadclipse_3.3.0.jar 官方网站:http://sourceforge.net/pro ...

  5. cocos2d-x Action

    转自:http://codingnow.cn/cocos2d-x/775.html 从结构图可以看出,动作类的基类是CCAction,通过继承它可以实现很多种动作. CCFiniteTimeActio ...

  6. SCOM MP中的PowerShell脚本

    该脚本可在MP中运行 #param ($file,$threshold) #此处可定义file 和 threshold 参数,该参数可以从脚本外部接收 $threshold = 10 $file = ...

  7. Java设计模式学习资源汇总

    本文记录了Java设计模式学习书籍.教程资源.此分享会持续更新: 1. 设计模式书籍 在豆瓣上搜索了一把,发现设计模式贯穿了人类生活的方方面面.还是回到Java与程序设计来吧. 打算先归类,再浏览,从 ...

  8. 深刻理解Python中的元类(metaclass)

    译注:这是一篇在Stack overflow上很热的帖子.提问者自称已经掌握了有关Python OOP编程中的各种概念,但始终觉得元类(metaclass)难以理解.他知道这肯定和自省有关,但仍然觉得 ...

  9. 应用：ValueStack

    理解ValueStack的基本机制!对各种现象作出解释. ValueStack实际上就是对OGNL的封装,OGNL主要的功能就是赋值与取值,Struts2正是通过ValueStack来进行赋值与取值的 ...

  10. java_Cookies_1_商品浏览历史记录servlet1

    public class CookiesServlet1 extends HttpServlet { public void doGet(HttpServletRequest request, Htt ...