这个时间轴是工作上用到的，自己写了一个， QQ空间有时间轴的控件， 百度文库也有时间轴的控件；
百度的时间轴大概是这样的：
用户点击对应的锚链接， 那个三角会滚动
， 然后左侧的界面也会滚动；
实际的效果如下图，用户点击左侧的按钮或者右侧的input，滚动条都会主动滚动， 这里有个小技巧就是用after和before伪类生成三角形， 用户点击按钮的滚动效果直接用jq的animate方法：
点击查看DEMO：打开
<!--//设置内容;window.onWebMessage( '{"type":"setItems","data":{"items":[{"name":1111},{"name":2222}]}}' ) ;//设置内容, 对应的item对象如果active为true为激活态;window.onWebMessage( '{"type":"setItems","data":{"items":[{"name":1000},{"name":1111},{"name":2222},{"name":3333,"active":true}]}}' ) ;//设置某个第n个位置的item;window.onWebMessage('{"type":"setItem","data":[2,{ "name" : "add-item"}]}');//激活第三个锚链接为选中态;window.onWebMessage( '{"type":"active","data":2}' )//获取目前的数据:window.onWebMessage( '{"type":"getItem"}' );--><html> <head> <meta charset="utf-8" /> <script src="http://cdn.bootCSS.com/jquery/2.1.4/jquery.js"></script> </head> <style> /*初始的reset样式*/ *{ margin:0; padding:0; } .time-line-wrap{ position: relative; width: 400px; margin:0 auto; } ul{ list-style: none; } body,html{ height: 100%; } body{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /*样式开始*/ .scroll-time-line{ height:100%; overflow: hidden; } .time-line-wrap{ position: relative; } .time-line-ul{ position: relative; } /** 时间轴的轴用伪类实现; */ .time-line-ul::before{ display: block; position:absolute; content:""; height:100%; width:1; left:27px; top:0; background: #eee; } .time-line-ul li{ padding:14px; position: relative; } .time-line-ul input { vertical-align: super; border-radius: 4px; border:1px solid #eee; padding:4px; line-height: 22px; margin-left:10px; } /** 使用after和before伪类实现input前面的三角形; */ .time-line-ul li::before{ position: absolute; content: ""; display: block; top: 21px; left: 40px; width: 0px; height: 0px; border: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid #EEE; } .time-line-ul li::after{ position: absolute; content: ""; display: block; top: 21px; left: 41px; width: 0px; height: 0px; border: 10px solid rgba(0, 0, 0, 0); border-right: 10px solid #fff; } /** 默认时间轴锚链接的样式 */ .time-line-icon{ width: 26px; height: 28px; display: inline-block; background: url(http://images0.cnblogs.com/blog2015/497865/201507/131424386411828.png); } /** 鼠标移动上来，或者锚链接有active时候的背景图样式 */ .time-line-icon.active,.time-line-icon:hover{ background-position: 0px 28px; } </style> <!--模板，勿删!--> <script type="text/tempate" id="li-tpl"> <% for(var i=0; i<items.length; i++ ) {%> <li class="li-<%=i%>"> <a href="###" class="time-line-icon <% if(items[i].active){ %> <%="active"%> <%}%> "></a> <input type="text" value="<%=items[i].name%>"/> </li> <% } %> </script> <body> <!-- 滚动出现在这个div里面 --> <div class="scroll-time-line"> <!--- 时间轴相关的html结构 --> <div class="time-line-wrap"> <ul class="time-line-ul"> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a href="###" class="time-line-icon"></a> <input type="text" value="2015"/> </li> <li> <a h
新闻热点
疑难解答
