jQuery时间轴插件：jQuery Timelinr

jQuery Timelinr：创建互动时间轴的插件

最新推荐文章于 2024-05-28 10:04:55 发布

原创

最新推荐文章于 2024-05-28 10:04:55 发布 · 791 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jQuery Timelinr是一个适用于网站展示历史和大事件的时间轴插件，支持滑动切换、水平/垂直滚动及键盘导航。通过CSS自定义布局，可以设置为垂直或水平显示。通过引入jquery.mousewheel.js并修改源码，可以增加滚轮驱动功能，使得用户可以通过滚轮上下滚动时间轴。

这是一款可用于展示历史和计划的时间轴插件，尤其比较适合一些网站展示发展历程、大事件等场景。该插件基于jQuery，可以滑动切换、水平和垂直滚动、支持键盘方向键。经过扩展后可以支持鼠标滚轮事件。

查看演示DEMO 下载源码

HTML

我们在body中建立一个div#timeline作为展示区，#dates为时间轴，示例中我们用年份作为主轴，#issues作为内容展示区，即展示对应主轴点年份的内容，注意id对应上。

<div id="timeline"> 
   <ul id="dates"> 
      <li><a href="#2011">2011</a></li> 
      <li><a href="#2012">2012</a></li> 
   </ul> 
   <ul id="issues"> 
      <li id="2011"> 
         <p>Lorem ipsum.</p> 
      </li> 
      <li id="2012"> 
         <p>分享生活 留住感动</p> 
      </li> 
   </ul> 
   <a href="#" id="next">+</a> <!-- optional --> 
   <a hr