纯 CSS 实现的 时间线,也支持使用 JavaScript 动态生成

Time-line

纯 CSS 实现的 时间线,也支持使用 JavaScript 生成。
DEMO | 演示
Time-line 预览图

HTML 渲染

你只需要根据 timeLine.html 代码结构进行简单的修改即可实现

JacaScript 渲染

你需要将 timeLine.html 103 行 取消注释,然后根据 timeLine.js 注释修改

timeLine.js 里 data变量 数据格式如下:

[
  {
    "title":"现在网",
    "link":"https://nowtime.cc",
    "time":"1578718860"
  },
  {
    "title":"ffmpeg 使用方法合集",
    "link":"https://nowtime.cc/software/834.html",
    "time":"1578725484"
  }
]

字段解释:

title 时间线显示的内容

link 点击后跳转的链接

time 该内容发布的时间,注意是 秒级时间戳

鸣谢

部分 CSS 样式参考的是 https://www.ihewro.com/archives.html

LICENSE

MIT LICENSE


如无特别声明,该文章均为 现在网NowTime.cc)原创,转载请遵循 署名-非商业性使用 4.0 国际(CC BY-NC 4.0) 协议,即转载请注明文章来源。


标签: HTML5, JavaScript, CSS3, 时间线

赞 (1)

已有 4 条评论

  1. 意思HTML里面的内容要手动挨个儿输入进去?不能自动生成?

    1. 可以啊,不是写了也支持 JavaScript 动态生成

      1. 我弄失败了=-=
        我放上去 之后 显示的还是你这边目录

        1. 我 https://nowtime.cc/time-line.html 就是用 JS 动态生成的

添加新评论