前言

最近在项目中使用了很多前端的东西，对于我一个做后台开发的人员，这是一个很好的锻炼的机会。经过这段时间的学习，感觉前端的东西太多了，太强大了，做出来的东西太炫酷了。现在有很多开源的前端框架，做的都非常的漂亮，h5发展了这么多年了，改变了互联网行业啊！

时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记。 下面给大家介绍几款漂亮的时间轴，也许大家以后工作中会用到。

一、纵向折叠时间轴

1、js文件（jQuery.js或者jQuery.min.js）

2、CSS文件

@CHARSET "UTF-8";body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,p,blockquote,th,td,figure{margin:0;padding:0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}table{border-collapse:collapse;border-spacing:0;}caption,th{font-weight:normal;text-align:left;}fieldset,img{border:0;}ul li{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;}h5{font-size:18px;margin-bottom:20px;color:#666;}h5 span{font-size:12px;color:#ccc;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}html{-webkit-text-size-adjust:none;-ms-text-size-adjust:none;}body{font:normal 14px/24px "Helvetica Neue",Helvetica,STheiti,"Microsoft Yahei","冬青黑体简体中文 w3",宋体,Arial,Tahoma,sans-serif,serif;word-wrap:break-word;background: #F0F0F0;}input,button,textarea,select,option,optiongroup{font-family:inherit;font-size:inherit;}code,pre{font-family:"Microsoft YaHei",Consolas,"Courier New",monospace;}.bw0{border: none !important;}*:focus{outline:0;}legend{color:#000;}input,select{vertical-align:middle;}button{overflow:visible;}input.button,button{cursor:pointer;}button,input,select,textarea{margin:0;}textarea{overflow:auto;resize:none;}label[for],input[type="button"],input[type="submit"],input[type="reset"]{cursor:pointer;}input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0;}a { text-decoration:none;color:#1C3D72 }img{-ms-interpolation-mode:bicubic;}.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}* html .clearfix { zoom: 1; } *:first-child+html .clearfix { zoom: 1; } .hidden{display:none;}.last{border-bottom:none !important;}blockquote{background:#f9f9f9;padding:8px 20px;border:1px solid #ccc;}.page { display:table;margin:0 auto;background:#fff;-moz-box-shadow: 0 5px 20px #CCCCCC;-webkit-box-shadow: 0 5px 20px #CCCCCC;box-shadow: 0 5px 20px #CCCCCC;}.link li { float:left;display:inline;margin-left:60px; }.link li a{color:#4F4E4E;font-size:16px;font-weight:500;padding-bottom:6px;display:block;}.link li.active{border-bottom:2px solid #0066ff;}.link li.active a{color:#0066FF }.link li:hover { border-bottom:2px solid #0066ff;color:#0066FF }.link li a:hover{color:#0066FF }.adlist{padding:20px;}.adlist li{float:left;diaplay:inline;margin-left:30px;margin-bottom:20px;width:110px;}.main { width:940px;margin:40px auto 10px auto;font-size:14px;display:table;padding-bottom:10px; border-bottom:1px solid #EEEEEE}.info { width:300px;float:left;margin-right:20px; }.info h3 { width:300px;height:26px;background:url('/../img/ictb.png') no-repeat;font-size:0;margin-bottom:8px; }.info ul{margin-left:-10px;}.info ul li{list-style:none;float:left;width:140px;padding-left:0;background:none;margin-left:10px;}.info ul{margin-left:-10px;}.b2 h3 { background-position:0 -26px; }.b3 { margin:0;position:relative; }.b3 span{position:absolute;right:10px;top:0;background:url('../img/morelink.gif') no-repeat left center;padding-left:12px;}.b3 span a{color:#8C8C8C;font-weight:600}.b3 h3 { background-position:0 -52px; }.info li { padding:3px 0 3px 12px;background:url('../img/dian.png') 2px center no-repeat; }.info li a { color:#8c8c8c; }.info p { color:#8c8c8c; }.info p img { display:table;margin:10px 0; }.morelink{padding-top:20px;}.morelink li{float:left;width:180px;}.box { width:940px;margin:18px auto 0 auto; }.left { width:140px;border-bottom:2px solid #DDD;background:#FFF;float:left; }.left li:hover { border-left:3px solid #0066ff; }.left li a { height:40px;line-height:40px;display:block;color:#333 }.left li a:hover,.left li.active a{color:#0066FF}.left li.active{border-left:3px solid #0066ff;}.left li { border-left:3px solid #fff; border-bottom: 1px solid #EEEEEE; font-size: 14px; height: 40px; margin-bottom: 1px; overflow: hidden; padding-left: 25px;}.event_year { width:100px;border-bottom:2px solid #DDD;text-align:center;float:left;margin-top:70px;margin-left:-60px; }.event_year li { height:40px;line-height:40px;background:#FFF;margin-bottom:1px;font-size:18px;color:#828282;cursor:pointer; }.event_year li.current { width:100px;background:#0066ff url('../img/jian.png') 100px 0 no-repeat;color:#FFF;text-align:left;padding-left:9px; }.event_list { width:850px;float:right;background:url('../img/dian3.png') 139px 0 repeat-y;margin-left:50px;margin-top:70px; }.event_list h3 { margin:0 0 10px 132px;font-size:24px;font-family:Georgia;color:#0066ff;padding-left:25px;background:url('../img/jian.png') 0 -45px no-repeat;height:38px;line-height:30px;font-style:italic; }.event_list li { background:url('../img/jian.png') 136px -80px no-repeat; }.event_list li span { width:127px;text-align:right;display:block;float:left;margin-top:10px; }.event_list li p { width:680px;margin-left:24px;display:inline-block;padding-left:10px;background:url('../img/jian.png') -21px 0 no-repeat;line-height:25px;_float:left; }.event_list li p span { width:650px;text-align:left;border-bottom:2px solid #DDD;padding:10px 15px;background:#FFF;margin:0; }.titlelist{line-height:24px;color: #8C8C8C;padding-bottom:20px;}.titlelist dt { font-weight: bold;color:#666;white-space: nowrap;margin:10px;}.titlelist dd {padding-left: 13px;}h1 { background: url("http://ww.chinaz.com/about/images/h1-bg.gif") no-repeat scroll left bottom rgba(0, 0, 0, 0); font-family: Tahoma,Arial,sans-serif; font-size: 14px; margin-bottom: 15px; padding-bottom: 12px;}.hr { border-top: 1px solid #CCD5DE; font-size: 0; height: 0; line-height: 0; margin: 15px 0;}.red { color: #0065CB; font-size:15px;}

3、HTML代码

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/about.css" rel="external nofollow" > <style> .page { width: 100%; background: #F0F0F0 url('img/dian2.png') repeat-x; } </style> <title>静态可以折叠时光轴</title></head><body> <div class="page"> <div class="box"> <ul class="event_year"> <li class="current"><label for="20170111">20170111</label></li> <li><label for="20170112">20170112</label></li> <li><label for="20170113">20170113</label></li> </ul> <ul class="event_list"> <div> <h3 id="20170111">20170111</h3> <li> <span>20170111 22:32:45</span> <p><span>出入口系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p> </li> <li> <span>20170111 21:00:31</span> <p><span>停车场系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p> </li> <li> <span>20170111 17:30:45</span> <p><span>楼宇门禁系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p> </li> </div> <div> <h3 id="20170112">20170112</h3> <li> <span>20170112 14:03:41</span> <p><span>视频监控系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p> </li> <li> <span>20170112 11:24:47</span> <p><span>电子巡更系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p> </li> </div> <div> <h3 id="20170113">20170113</h3> <li><span>20170112 14:03:41</span><p><span>视频监控系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p></li> <li><span>20170112 14:03:41</span><p><span>视频监控系统<a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a></span></p></li> </div> </ul> <div class="clearfix"></div> </div> </div> <script src="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 (http://brandonaaron.net) * Licensed under the MIT License (LICENSE.txt). * * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers. * Thanks to: Mathias Bank(http://mended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true | false, default to false startAt: 1, // value: integer, default to 1 (first) autoPlay: 'false', // value: true | false, default to false autoPlayDirection: 'forward', // value: forward | backward, default to forward autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs) }, options); $(function(){ // setting variables... many of them var howManyDates = $(settings.datesDiv+' li').length; var howManyIssues = $(settings.issuesDiv+' li').length; var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); var currentIssue = $(settings.issuesDiv).find('li.'+settings.issuesSelectedClass); var widthContainer = $(settings.containerDiv).width(); var heightContainer = $(settings.containerDiv).height(); var widthIssues = $(settings.issuesDiv).width(); var heightIssues = $(settings.issuesDiv).height(); var widthIssue = $(settings.issuesDiv+' li').width(); var heightIssue = $(settings.issuesDiv+' li').height(); var widthDates = $(settings.datesDiv).width(); var heightDates = $(settings.datesDiv).height(); var widthDate = $(settings.datesDiv+' li').width(); var heightDate = $(settings.datesDiv+' li').height(); // set positions! if(settings.orientation == 'horizontal') { $(settings.issuesDiv).width(widthIssue*howManyIssues); $(settings.datesDiv).width(widthDate*howManyDates).css('marginLeft',widthContainer/2-widthDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).height(heightIssue*howManyIssues); $(settings.datesDiv).height(heightDate*howManyDates).css('marginTop',heightContainer/2-heightDate/2); var defaultPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); } $(settings.datesDiv+' a').click(function(event){ event.preventDefault(); // first vars var whichIssue = $(this).text(); var currentIndex = $(this).parent().prevAll().length; // moving the elements if(settings.orientation == 'horizontal') { $(settings.issuesDiv).animate({'marginLeft':-widthIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); } else if(settings.orientation == 'vertical') { $(settings.issuesDiv).animate({'marginTop':-heightIssue*currentIndex},{queue:false, duration:settings.issuesSpeed}); } $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}).removeClass(settings.issuesSelectedClass).eq(currentIndex).addClass(settings.issuesSelectedClass).fadeTo(settings.issuesTransparencySpeed,1); // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows | bugfixed: arrows not showing when jumping from first to last date if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeIn('fast'); $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeIn('fast'); $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } // now moving the dates $(settings.datesDiv+' a').removeClass(settings.datesSelectedClass); $(this).addClass(settings.datesSelectedClass); if(settings.orientation == 'horizontal') { $(settings.datesDiv).animate({'marginLeft':defaultPositionDates-(widthDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); } else if(settings.orientation == 'vertical') { $(settings.datesDiv).animate({'marginTop':defaultPositionDates-(heightDate*currentIndex)},{queue:false, duration:'settings.datesSpeed'}); } }); $(settings.nextButton).bind('click', function(event){ event.preventDefault(); if(settings.orientation == 'horizontal') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionIssues/widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates-widthDate; if(currentPositionIssues <= -(widthIssue*howManyIssues-(widthIssue))) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:last-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues-widthIssue},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); } } } else if(settings.orientation == 'vertical') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionIssues/heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates-heightDate; if(currentPositionIssues <= -(heightIssue*howManyIssues-(heightIssue))) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:last-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { $(settings.issuesDiv).animate({'marginTop':currentPositionIssues-heightIssue},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass); } } } // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } }); $(settings.prevButton).click(function(event){ event.preventDefault(); if(settings.orientation == 'horizontal') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginLeft').substring(0,$(settings.issuesDiv).css('marginLeft').indexOf('px'))); var currentIssueIndex = currentPositionIssues/widthIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginLeft').substring(0,$(settings.datesDiv).css('marginLeft').indexOf('px'))); var currentIssueDate = currentPositionDates+widthDate; if(currentPositionIssues >= 0) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:first-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { $(settings.issuesDiv).animate({'marginLeft':currentPositionIssues+widthIssue},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); $(settings.datesDiv).animate({'marginLeft':currentIssueDate},{queue:false, duration:'settings.datesSpeed'}); $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); } } } else if(settings.orientation == 'vertical') { var currentPositionIssues = parseInt($(settings.issuesDiv).css('marginTop').substring(0,$(settings.issuesDiv).css('marginTop').indexOf('px'))); var currentIssueIndex = currentPositionIssues/heightIssue; var currentPositionDates = parseInt($(settings.datesDiv).css('marginTop').substring(0,$(settings.datesDiv).css('marginTop').indexOf('px'))); var currentIssueDate = currentPositionDates+heightDate; if(currentPositionIssues >= 0) { $(settings.issuesDiv).stop(); $(settings.datesDiv+' li:first-child a').click(); } else { if (!$(settings.issuesDiv).is(':animated')) { $(settings.issuesDiv).animate({'marginTop':currentPositionIssues+heightIssue},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li').animate({'opacity':settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+' li.'+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).prev().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass); $(settings.datesDiv).animate({'marginTop':currentIssueDate},{queue:false, duration:'settings.datesSpeed'},{queue:false, duration:settings.issuesSpeed}); $(settings.datesDiv+' a.'+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().prev().children().addClass(settings.datesSelectedClass); } } } // prev/next buttons now disappears on first/last issue | bugfix from 0.9.51: lower than 1 issue hide the arrows if(howManyDates == 1) { $(settings.prevButton+','+settings.nextButton).fadeOut('fast'); } else if(howManyDates == 2) { if($(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass)) { $(settings.prevButton).fadeOut('fast'); $(settings.nextButton).fadeIn('fast'); } else if($(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass)) { $(settings.nextButton).fadeOut('fast'); $(settings.prevButton).fadeIn('fast'); } } else { if( $(settings.issuesDiv+' li:first-child').hasClass(settings.issuesSelectedClass) ) { $(settings.prevButton).fadeOut('fast'); } else if( $(settings.issuesDiv+' li:last-child').hasClass(settings.issuesSelectedClass) ) { $(settings.nextButton).fadeOut('fast'); } else { $(settings.nextButton+','+settings.prevButton).fadeIn('slow'); } } }); // keyboard navigation, added since 0.9.1 if(settings.arrowKeys=='true') { if(settings.orientation=='horizontal') { $(document).keydown(function(event){ if (event.keyCode == 39) { $(settings.nextButton).click(); } if (event.keyCode == 37) { $(settings.prevButton).click(); } }); } else if(settings.orientation=='vertical') { $(document).keydown(function(event){ if (event.keyCode == 40) { $(settings.nextButton).click(); } if (event.keyCode == 38) { $(settings.prevButton).click(); } }); } } // default position startAt, added since 0.9.3 $(settings.datesDiv+' li').eq(settings.startAt-1).find('a').trigger('click'); // autoPlay, added since 0.9.4 if(settings.autoPlay == 'true') { setInterval("autoPlay()", settings.autoPlayPause); } });};// autoPlay, added since 0.9.4function autoPlay(){ var currentDate = $(settings.datesDiv).find('a.'+settings.datesSelectedClass); if(settings.autoPlayDirection == 'forward') { if(currentDate.parent().is('li:last-child')) { $(settings.datesDiv+' li:first-child').find('a').trigger('click'); } else { currentDate.parent().next().find('a').trigger('click'); } } else if(settings.autoPlayDirection == 'backward') { if(currentDate.parent().is('li:first-child')) { $(settings.datesDiv+' li:last-child').find('a').trigger('click'); } else { currentDate.parent().prev().find('a').trigger('click'); } }}

2、CSS文件

@charset "utf-8";html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre, a, code, em, img, small, strong, sub, sup, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}a { color: #007bc4 ; text-decoration: none;} a:hover { text-decoration: underline; }ol, ul { list-style: none;}table { border-collapse: collapse; border-spacing: 0;}body { height: 100%; font: 12px/18px Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color: #51555C; background: #D3D3D3;}img { border: none;}#main { width: 550px; min-height: 400px; margin: 30px auto 0 auto; background: #fff; -moz-border-radius: 12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; margin-left:5px;}h2.top_title { margin: 4px 20px; padding-top: 15px; padding-left: 20px; padding-bottom: 10px; border-bottom: 1px solid #d3d3d3; font-size: 18px; color: #a84c10; background: url(../images/arrL.gif) no-repeat 2px 14px;}

3、HTML代码

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>横向时间轴</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <style type="text/css"> #timeline { width: 500px; height: 300px; overflow: hidden; margin: 100px auto; position: relative; background: url('img/dot.gif') left 45px repeat-x; } #dates { width: 760px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 180px; height: 50px; font-size: 24px; text-align: center; background: url('img/biggerdot.png') center bottom no-repeat; } #dates a { width:180px; line-height: 20px; padding-bottom: 2px; font-size: 15px; } #dates .selected { font-size: 20px; font-weight:bold; } #issues { width: 760px; height: 300px; overflow: hidden; } #issues li { width: 760px; height: 300px; list-style: none; float: left; } #issues li h3 { color: #ffcc00; font-size: 35px; margin: 20px 0; } #issues li p { font-size: 14px; margin-right: 70px; margin: 10px; font-weight: normal; line-height: 22px; } </style> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.timelinr-0.9.53.js"></script> <script type="text/javascript"> $(function () { $().timelinr({ autoPlay: 'true', autoPlayDirection: 'forward', startAt: 4 }) }); </script></head><body> <div id="main"> <h2 class="top_title">生活轨迹</h2> <div id="timeline"> <ul id="dates"> <li><a href="#2005">20170121 22:35:41</a></li> <li><a href="#2006">20170121 20:13:08</a></li> <li><a href="#2007">20170121 18:26:37</a></li> <li><a href="#2008">20170121 14:56:10</a></li> <li><a href="#2009">20170121 13:31:27</a></li> <li><a href="#2010">20170121 11:47:38</a></li> <li><a href="#2011">20170121 9:01:22</a></li> <li><a href="#2012">20170121 8:24:39</a></li> </ul> <ul id="issues"> <li id="2005"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>出入口系统</h3></a> <p> 进入小区</p> </li> <li id="2006"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>出入口系统</h3></a> <p> 离开小区</p> </li> <li id="2007"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>停车场系统</h3></a> <p> 豫E763809</p> </li> <li id="2008"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>停车场系统</h3></a> <p> 豫E763809</p> </li> <li id="2009"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>楼宇门禁系统</h3></a> <p> 1#2-205</p> </li> <li id="2010"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>楼宇门禁系统</h3></a> <p>1#2-205</p> </li> <li id="2011"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>非机动车系统</h3></a> <p>车棚4号</p> </li> <li id="2012"> <a href="f?p='||V('APP_ID')||':122:'||V('SESSION')||':::::"><h3>非机动车系统</h3></a> <p>车棚4号</p> </li> </ul> </div> </div></body></html>

4、运行效果

总结

以上就是这篇文章的全部内容了，因为项目中需要，领导让我做了多个，他从中挑选一个，还有很多很多例子，就不一一列举出来了。在这里面就简单列举几个简单大方的例子，大家可以一起学习。有什么问题可以留言交流。