我们经常在一些网站上看到一些关于公司大事记、网站更新记录之类的页面，尤其现在的一些电子商务网站，来一个以时间线为轴，来标记一些重要日子进行一些大促之类的活动，有了这样一个直观的时间轴的东东，可以让来浏览网页的用户能很快捕捉到一些有用的信息。
那么我们可不可以把这个时间轴做的动感一点？然后我们可不可以把PC上这么好玩的时间轴移植到移动网页上呢？答案当然是可以的。稍后我把代码送出来。
先来看一张截图吧，这是我最终实现之后的页面样式，因为不会截图，也没有专业的视觉设计师，所以页面的视觉风格是借鉴了别人的：
线上演示地址：http://sandbox.runjs.cn/show/phvofu0c
你也可以拿出你的手机扫描下面的二维码访问示例页面：
如果看到以上在PC和手机上的演示之后，你有兴趣的话，就可以接下来看看我的代码了，老规矩，代码全部奉送！
timeline.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <title>TimeLine</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <link href="timeline.css" rel="stylesheet"> <script language="javascript"> $(function(){ $(".timeline").eq(0).animate({ height:'600px' },1500); }); </script> </head> <body> <div class="timeline"> <div class="timeline-date"> <ul> <h2 class="second" style="position: relative;"> <span>2013年</span> </h2> <li> <h3>09.03<span>2013</span></h3> <dl class="right"> <span>时间轴就要成功了！</span> </dl> </li> <li> <h3>08.15<span>2013</span></h3> <dl class="right"> <span>为了时间轴奋斗吧！</span> </dl> </li> </ul> </div> <div class="timeline-date"> <ul> <h2 class="second" style="position: relative;"> <span>2012年</span> </h2> <li> <h3>09.03<span>2012</span></h3> <dl class="right"> <span>那一年的今天！</span> </dl> </li> <li> <h3>08.15<span>2012</span></h3> <dl class="right"> <span>前端之路慢慢修远！</span> </dl> </li> </ul> </div> </div> </body> </html>
timeline.css
body,h2,ul,h3 {padding: 0;margin: 0;} ul {list-style: none outside none;} .timeline { background: url("images/line4.png") repeat-y 50px 0; overflow: hidden; position: relative; height:100px; margin: 20px 10px; } .timeline-date { overflow: hidden; position: relative; } .timeline-date h2 { background:url("images/icon9.png") no-repeat 10px 0; height: 87px; margin-bottom: 20px; } .timeline-date h2 span { color: #999999; display: inline-block; font-size: 22px; margin: 30px 0px 0 110px; } .timeline-date ul li { background: url("images/icon7.png") no-repeat 42px 5px; zoom: 1; height:70px; } .timeline-date ul li h3 { float: left; text-align: right; font-size: 14px; color: #878787; display: block; } .timeline-date ul li h3 span { display: block; color: #ADADAD; font-size: 12px; padding-left:15px; } .timeline-date ul li dl { margin-top: -5px; } .timeline-date ul li dl.right { background: url("images/left_arrow.png") no-repeat 0 0; float: left; margin-left: 35px; margin-top: -5px; display: block; background-color:#FFBB42; height:40px; width:216px; } .timeline-date ul li dl span{ display: block; font-size:16px; padding: 0px 10px 0px 30px; color:#fff; line-height: 40px; }
欢迎批评指正！