Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件，可以根据时间的先后嵌入各种媒体包括微博,视频和地图等。这个展现的模式非常适合设计师的作品集和个人简历的展示。Timeline Portfolio使用jquery和CSS3封装的非常棒，插件通过读取data.json文件来写入文档中，这样，您需要根据自己的需求设计下页面，然后再修改data.json里面的数据为自己的就可以实现一个超炫的时间轴网站了。

jquery插件实例：超炫的时间轴jquery插件Timeline Portfolio

创建html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Timeline Portfolio | Tutorialzine Demo</title>
 
        <!-- 默认的 timeline 样式 -->
        <link rel="stylesheet" href="assets/css/timeline.css" />
        <!-- 自定义主题 -->
        <link rel="stylesheet" href="assets/css/styles.css" />
 
        <!-- 字体 -->
        <link rel="stylesheet" href="http://fonts.useso.com/css?family=Dancing+Script|Antic+Slab" />
 
        <!--[if lt IE 9]>
          <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
    </head>
 
    <body>
 
        <div id="timeline">
            <!-- Timeline 自动生成的内容 -->
        </div>
 
        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/timeline-min.js"></script>
        <script src="assets/js/script.js"></script>
 
    </body>
</html>

head区引入了timeline默认样式timeline.css和自定义样式styles.css，在小于IE9的情况下加载了 html5shiv。在底部引入了jquery库、timeline插件和初始化代码script.js。当调用插件的时候，插件会查找ID为 timeline的div，并把从data.json读到的内容按格式添加到该div中。以下为内容格式代码：

<div class="container main" id="timeline">
    <div class="feature slider" style="overflow-y: hidden;">
        <div class="slider-container-mask slider-container slider-item-container">
 
            <!-- The divs below are the events of the timeline -->
 
            <div class="slider-item content">
                <div class="text container">
 
                    <h2 class="start">Johnny B Goode</h2>
                    <p><em><span class="c1">Designer</span> &amp; <span class=
                    "c2">Developer</span></em></p>
 
                </div>
 
                <div class="media media-wrapper media-container">
                    <!-- 图片或媒体视频 -->
                </div>
            </div>
 
            <div class="slider-item content content-container">
                <div class="text container">
 
                    <h2 class="date">March 2009</h2>
                    <h3>My first experiment in time-lapse photography</h3>
                    <p>Nature at its finest in this video.</p>
 
                </div>
 
                <div class="media media-wrapper media-container">
                    <!-- Images or other media go here -->
                </div>
            </div>
 
            <!-- More items go here -->
        </div>
 
        <!-- Next 箭头按钮-->
        <div class="nav-next nav-container">
            <div class="icon"></div>
            <div class="date">March 2010</div>
            <div class="title">Logo Design for a pet shop</div>
        </div>
 
        <!-- Previous 箭头按钮-->
        <div class="nav-previous nav-container">
            <div class="icon"></div>
            <div class="date">July 2009</div>
            <div class="title">Another time-lapse experiment</div>
        </div>
    </div>
 
    <div class="navigation">
 
            <!-- 各事件的标题缩略图-->
 
            <div class="time">
                <!-- The timeline numbers go here -->
            </div>
        </div>
 
        <div class="timenav-background">
            <div class="timenav-line" style="left: 633px;"></div>
 
            <div class="timenav-interval-background top-highlight"></div>
        </div>
 
        <div class="toolbar" style="top: 27px;">
            <div class="back-home icon" title="Return to Title"></div>
            <div class="zoom-in icon" title="Expand Timeline"></div>
            <div class="zoom-out icon" data-original-title="Contract Timeline"></div>
        </div>
    </div>
</div>

初始化

$(function(){
 
    var timeline = new VMM.Timeline();
    timeline.init("data.json");
 
});

CSS部分请参考实例或是到官方查看，在此不多作解释。

超炫的时间轴jquery插件Timeline Portfolio的更多相关文章

  1. Jquery实现超酷的时间轴特效

    Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...

  2. 帮助更语义化的显示时间的jQuery插件 - tidyTime.js

    来源:GBin1.com 网站或者web应用开发过程中,难免会遇到需要展示时间的地方,例如,留言时间或者发布帖子的时候,那么大家是不是相关过使用更加符合语义学的方式来显示时间呢? 08:15  显示成 ...

  3. MixItUp：超炫！基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

  4. SmohanTimeLine.js 酷炫的时间轴效果

    展示地址 点此下载 原文出处 一.参数说明 item : '.item', //项目元素 top : 30, //与下一行的间距 pointWidth : 22, //时间点宽度 cornerWidt ...

  5. 炫酷实用的jQuery插件 涵盖菜单、按钮、图片

    新的一周开始了,今天我们要为大家分享一些全新的jQuery插件和HTML5/CSS3应用,这些jQuery插件不仅非常炫酷,而且还挺实用,这次的分享包含jQuery菜单.CSS3按钮已经多种图片特效, ...

  6. Android 超仿Path时间轴和扇形菜单的效果

    网上看到的  ,仅此记录一下,用到的时候便于查找 效果如下: 源码下载地址 :  http://download.csdn.net/detail/abc13939746593/7251933

  7. 超炫酷的 IntelliJ IDEA 插件(一)

    工善其事必先利器 打开setting文件选择Plugins选项 Ctrl + Alt + S File -> Setting 我的idea是最新版本2019.02 有的和别人界面可能不一样 主界 ...

  8. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  9. jQuery时间轴插件timeline.js

    http://www.jq22.com/jquery-info13695 http://www.jq22.com/jquery-info13357 简要教程 timeline.js是一款jQuery时 ...

随机推荐

  1. 设置DIV根据内容自动调整高度的三个方法

    Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid=&qu ...

  2. n皇后问题<dfs>

    n皇后问题指的是: n*n的国际象棋棋盘上摆放n个皇后,使其不能互相攻击, 即任意两个皇后都不能处于同一行.同一列或同一斜线上, 问有多少种摆法. 和一般n皇后问题不同的是,现在棋盘上有可能已经放了一 ...

  3. 关于有限状态机FSM同步复位的问题

    FSM通常情况下使用异步信号进行复位,如FSM1中的rst_n信号.当rst_n信号为低时,FSM进入空闲状态IDLE. 在某些特殊情况下有可能需要跟随某个外部信号强制切换到空闲状态,也即同步复位.下 ...

  4. 打造最强Windows Server 2012 给你比Windows 8更好的体验

    每一代微软桌面操作系统推出的时候,都会同步推出相应核心的服务器操作系统,稳定性会更强哈 所以改造一下,让它保留兼容和专业的同时又有桌面操作系统的美观和便捷,多好 咳咳,让我们来看看怎么把Server ...

  5. Struts2--Dynamic Result动态结果集

    ${r} : 表示配置文件xml可以读取action的valuestack的内容 1. jsp显示文件: <body> 动态结果 一定不要忘了为动态结果的保存值设置set get方法 &l ...

  6. IFields Interface 定义一个字段集合对象

    Description The Fields object represents a collection of columns in a table. The term field is synon ...

  7. 如何创建一个要素数据类 IField，IFieldEdit，IFields，IFieldsEditI，GeometryDef，IGeometryDefEdit接口

    如何创建一个要素数据类 创建要素类用到了IFeatureWorkspace.CreateFeatureClass方法,在这个方法中有众多的参数,为了满足这些参数,我们要学习和了解下面的接口. IFie ...

  8. SQL复习五（索引）

    SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭开他的神秘面纱. 1.1 什么是索引? SQL索引有两种,聚集索引和非聚集索引 ...

  9. javascript open window

    参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended ...

  10. Android编程中的5种数据存储方式

    Android编程中的5种数据存储方式 作者:牛奶.不加糖 字体:[增加 减小] 类型:转载 时间:2015-12-03我要评论 这篇文章主要介绍了Android编程中的5种数据存储方式,结合实例形式 ...