阅读更多

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_下载

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

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

  • node-v19.8.0-darwin-arm64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

  • node-v18.5.0-darwin-arm64.tar.xz

    Node.js,简称Node,是一个开源且跨平台的JavaScript运行时环境,它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立,旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎,可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型,这使得它非常适合处理大量并发连接,从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外,Node.js使用了模块化的架构,通过npm(Node package manager,Node包管理器),社区成员可以共享和复用代码,极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展,它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等,因此,开发者可以用JavaScript编写全栈应用程序,这一点大大提高了开发效率和便捷性。 在实践中,许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台,如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能,简化了开发流程,并且能更快地响应市场需求。

Global site tag (gtag.js) - Google Analytics