<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="https://www.jb51.net/css/about.css" > <style> .page { width: 100%; background: #F0F0F0 url('img/dian2.png') repeat-x; } </style> <title>静态可以折叠时光轴</title> </head> <body> <div> <div> <ul> <li><label for="20170111">20170111</label></li> <li><label for="20170112">20170112</label></li> <li><label for="20170113">20170113</label></li> </ul> <ul> <div> <h3>20170111</h3> <li> <span>20170111 22:32:45</span> <p><span>出入口系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p> </li> <li> <span>20170111 21:00:31</span> <p><span>停车场系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p> </li> <li> <span>20170111 17:30:45</span> <p><span>楼宇门禁系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p> </li> </div> <div> <h3>20170112</h3> <li> <span>20170112 14:03:41</span> <p><span>视频监控系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p> </li> <li> <span>20170112 11:24:47</span> <p><span>电子巡更系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p> </li> </div> <div> <h3>20170113</h3> <li><span>20170112 14:03:41</span><p><span>视频监控系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p></li> <li><span>20170112 14:03:41</span><p><span>视频监控系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" ></a></span></p></li> </div> </ul> <div></div> </div> </div> <script src="https://www.jb51.net/js/jquery.min_v1.0.js" type="text/javascript"></script> <script type="text/javascript"> $(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> </body> </html>
4、运行效果：
二、纵向鼠标滑动时间轴
1、js文件（jquery.js和jquery.mousewheel.js,jquery.easing.js,自定义history.js）
（1）jquery.mousewheel.js文件
/*! Copyright (c) 2011 Brandon Aaron () * Licensed under the MIT License (LICENSE.txt). * * Thanks to: for some pointers. * Thanks to: Mathias Bank() for a scope bug fix. * Thanks to: Seamus Leahy for adding deltaX and deltaY * * Version: 3.0.6 * * Requires: 1.2.2+ */ (function(a){function d(b){var c=b||window.event,d=[].slice.call(arguments,1),e=0,f=!0,g=0,h=0;return b=a.event.fix(c),b.type="mousewheel",c.wheelDelta&&(e=c.wheelDelta/120),c.detail&&(e=-c.detail/3),h=e,c.axis!==undefined&&c.axis===c.HORIZONTAL_AXIS&&(h=0,g=-1*e),c.wheelDeltaY!==undefined&&(h=c.wheelDeltaY/120),c.wheelDeltaX!==undefined&&(g=-1*c.wheelDeltaX/120),d.unshift(b,e,g,h),(a.event.dispatch||a.event.handle).apply(this,d)}var b=["DOMMouseScroll","mousewheel"];if(a.event.fixHooks)for(var c=b.length;c;)a.event.fixHooks[b[--c]]=a.event.mouseHooks;a.event.special.mousewheel={setup:function(){if(this.addEventListener)for(var a=b.length;a;)this.addEventListener(b[--a],d,!1);else this.onmousewheel=d},teardown:function(){if(this.removeEventListener)for(var a=b.length;a;)this.removeEventListener(b[--a],d,!1);else this.onmousewheel=null}},a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})})(jQuery)
（2）jquery.easing.js文件