阅读更多

21顶
0踩

Web前端
时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形,当事件发生的时候则在这些长条的上方进行标记。

本文介绍 7 个漂亮的时间轴组件,它们使用JavaScript和CSS开发。

1. Simile Widgets

使用这个小工具,你可以创造出漂亮的交互式时间轴,就像下面这个。试试水平拖动它或者使用你的鼠标滚轮。点击某个事件可以看到更多的细节。


演示

2. Timeglider

Timeglider JS是一个支持数据缩放、平移的时间轴组件,使用Javascript编写,常用于历史项目、项目计划等。该时间轴可以通过拖动右边的垂直栏进行缩放:向上拖动是放大(较少时间显示),向下则是缩小(显示更多时间)。同样也可以使用鼠标滚轮进行控制。


演示

3. Woorktuts


演示

4. Tiki Toki

TikiToki是一个Web应用程序,使用它可以非常容易地在浏览器中创建交互式多媒体时间轴。在TikiToki时间轴中可以嵌入图像、文本,甚至是视频(YouTube、Vimeo及AVI格式)。


演示

5. Google 10 Year Timeline


演示

6. Bluelinemedia Timeline


演示

7. Pure Css Timeline

简单、清爽的时间轴,使用一些逐次上升的线框来进行描述。这里没有使用CSS和HTML,但是依然很漂亮。


演示

Via  Webdeveloperjuice
  • 大小: 32.7 KB
  • 大小: 33.8 KB
  • 大小: 32.6 KB
  • 大小: 82.5 KB
  • 大小: 74.4 KB
  • 大小: 35.5 KB
  • 大小: 22.4 KB
21
0
评论 共 4 条 请登录后发表评论
4 楼 public2 2011-09-30 16:51
非常地好。以前用ext做过个,要早知道就好了
3 楼 ldbjakyo 2011-09-30 16:18
2 楼 jspc 2011-09-30 12:55
   这种的功能还是第一次见到,了解着,在项目中有需要的话,在查询。
谢谢分享 
1 楼 duanhengtao03 2011-09-30 12:00
顶,很好,留着以后用!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • vuecutetimeline一个可爱的Vuejs时间轴组件

    vue-cute-timeline:一个可爱的Vue.js时间轴组件

  • 7 个漂亮的 JavaScript 时间轴组件推荐

    时间轴是一个按时间顺序描述一系列事件的很好方式,经常用在项目规划中。时间轴的典型方案通常设计成一个包含许多长条的带有数据...本文介绍 7 个漂亮的时间轴组件,它们使用 JavaScript 和 CSS 开发。 1. Simil...

  • 用 JavaScript 实现时间轴与动画 - 前端组件化

    我们一起来先实现一个动画库,一起来看一看我们应该如何去抽象这些开发组件所需要的底层能力。

  • Blazor的简单时间轴组件-JavaScript开发

    BlazorTimeline Blazor的简单时间线组件响应Swift! 功能:check_mark_button:简单的组件:check_mark_button:颜色自定义:check_mark_button:响应能力强! :check_mark_button:您可以为Blazor放置任何BlazorTimeline ...

  • 7 个漂亮的 JavaScript 的时间轴组件

    最近页面要用到时间轴,苦于网上时间轴插件难寻,故在此分享下: 1. Simile Widgets View Demo . 2. Timeglider View Demo . 3. Woorktuts View Demo . 4. Ti...

  • 7个漂亮的JavaScript的时间轴组件

    导读:时间轴是通过互联网技术,依据时间顺序,把一方面或多方面的时间足迹事件串联起来,形成相对完整的记录体系,再运用图文的形式呈现给用户;...本文介绍7个漂亮的使用JavaScript和CSS开发的时间轴组

  • vue-horizontal-timeline:只是使用Vue.js制作的一个简单的水平时间轴组件

    只是一个由Vue.js制作的简单水平时间轴组件。 演示版 故事书 前往 如何安装 npm $ npm install vue-horizontal-timeline --save 纱线(推荐) $ yarn add vue-horizontal-timeline 快速开始 Vue.js 您可以导入...

  • 【JavaScript源代码】vue时间线组件的使用方法.docx

    vue时间线组件的使用方法  本文实例为大家分享了vue时间线组件的具体实现代码,供大家参考,具体内容如下 效果 vue-时间线组件(时间轴组件)代码 <template> <ul class="timeline-wrapper"> ...

  • 基于Echarts2.2.7的带时间轴地图展示源码(Html5+JavaScript)极简版

    这是一份基于Echarts2.2.7开发的带时间轴的echarts地图和柱状图综合展示Html页面的源码极简版,其中包含了如何在Html中集成Echarts组件,同时集成了相关的时时间轴组件,源码中涉及的组件已经打包到一起,比如...

  • react-horizontal-timeline:React的水平时间线组件

    您可以将customItemType传递给ElementWrapper组件,并将customInnerElementType传递给时间轴组件,以使用自己的react组件自定义计划。 没有JQuery。 正在安装 一系列循序渐进的示例,告诉您如何运行开发环境 说出...

  • [Vue3]简易时间轴组件

    [Vue3]简易时间轴组件

  • react-native-timeline:React本机时间轴组件

    React本机时间轴列表 适用于React Native的Easy Timeline组件 安装 yarn add react-native-timeline 或者 npm install --save react-native-timeline 参考 即将推出... 屏幕截图 即将推出... 例子 您可以在此仓库...

  • vuelighttimeline轻量易扩展的Vuejs时间轴组件

    vue-light-timeline:轻量易扩展的 Vue.js 时间轴组件

  • 7 个漂亮的 JavaScript 的时间轴组件 [转]

    时间轴:通过互联网技术,依据时间顺序,把一方面或多方面的 时间足迹事件串联起来,形成...本文介绍 7 个漂亮的使用 JavaScript 和 CSS 开发的时间轴组件: 1. Simile Widgets View Demo . 2. Timeglider ...

  • vertical-timeline-component-react:React.js的时间轴组件

    垂直时间轴分量React生成响应式垂直时间轴的简单组件地位入门安装为npm依赖项npm install --save vertical-timeline-component-reactAPI文档时间线这是创建垂直时间轴的包装器组件。 孩子们的儿童数量必需的允许值...

  • react-horizontal-timeline:[未维护]时间轴组件

    如果您觉得它有用并希望成为此软件包的维护者,请与我联系水平时间线它将仅使用您提供的日期来呈现时间轴,并且由您决定选择日期时的操作。 即,它将为您提供单击日期的索引,您可以执行任何操作。 财产类型默认...

  • 现代且响应迅速的React时间轴组件。_JavaScript_SCSS_下载.zip

    现代且响应迅速的React时间轴组件。_JavaScript_SCSS_下载

  • 微信小程序·自定义时间轴组件

    小程序中总有许许多多的事件需要记录~~因此编写了自定义时间轴组件满足一些相关需求

  • java+sql server项目之科帮网计算机配件报价系统源代码.zip

    sql server+java项目之科帮网计算机配件报价系统源代码

  • 【java毕业设计】智慧社区老人健康监测门户.zip

    有java环境就可以运行起来 ,zip里包含源码+论文+PPT, 系统设计与功能: 文档详细描述了系统的后台管理功能,包括系统管理模块、新闻资讯管理模块、公告管理模块、社区影院管理模块、会员上传下载管理模块以及留言管理模块。 系统管理模块:允许管理员重新设置密码,记录登录日志,确保系统安全。 新闻资讯管理模块:实现新闻资讯的添加、删除、修改,确保主页新闻部分始终显示最新的文章。 公告管理模块:类似于新闻资讯管理,但专注于主页公告的后台管理。 社区影院管理模块:管理所有视频的添加、删除、修改,包括影片名、导演、主演、片长等信息。 会员上传下载管理模块:审核与删除会员上传的文件。 留言管理模块:回复与删除所有留言,确保系统内的留言得到及时处理。 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7及以上 数据库工具:Navicat11及以上 开发软件:eclipse/idea Maven包:Maven3.3及以上

Global site tag (gtag.js) - Google Analytics