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. HDU 2612 Find a way BFS，防止超时是关键

    之前我写的时候是:每找到一个‘@’就广搜一次,如果这样写有多少个‘@’就会广搜几次,这样就超时了.我队友告诉我应该打个表,这个方法确实不错.因为'Y'和'M'是唯一的,我通过这两个点分别广搜一次,对所 ...

  2. [转]JSON详解

    阅读目录 JSON的两种结构 认识JSON字符串 在JS中如何使用JSON 在.NET中如何使用JSON 总结 JSON的全称是”JavaScript Object Notation”,意思是Java ...

  3. （转）如何向map和reduce脚本传递参数

    [MapReduce] 如何向map和reduce脚本传递参数,加载文件和目录 分类: hadoop2014-04-28 21:30 1553人阅读 评论(0) 收藏 举报 hadoop 本文主要讲解 ...

  4. 怎么把一个int数组转化为char型数组？？

    /* 234 Press any key to continue */ #include <stdio.h> int main() { ,n; ]; ; num; ++n) { s[n] ...

  5. mkconfig文件解析

    #!/bin/sh -e #mkconfig 100ask24x0 arm arm920t 100ask24x0 Null s3c24x0#s0                     s1      ...

  6. 「CSS3 」3D效果 & 透视

    CSS3d透视 perspective属性 原文链接:https://segmentfault.com/a/1190000003843764

  7. extjs 框架模板

    的 <script> Ext.onReady(function(){ Ext.create('Ext.container.Viewport', { layout: 'border', it ...

  8. NOIP模拟赛---1.生气的LJJ (anger)

    LJJ刚上完了一节课!这节课是数学课!他知道了加减属于一级运算,乘除属于二级运算,幂则属于三级运算,而幂的优先级>乘除的优先级>加减的优先级(这是几年级的数学课).但是,从上一套试卷+上一 ...

  9. HttpClient 教程 (二)

    第二章 连接管理 HttpClient有一个对连接初始化和终止,还有在活动连接上I/O操作的完整控制.而连接操作的很多方面可以使用一些参数来控制. 2.1 连接参数 这些参数可以影响连接操作: 'ht ...

  10. 采用多线程方式，解决由于查询等待造成winfrom假死问题

    1.这里是触发一个比较耗时的操作,比如一次大数据量的查询: Thread thread = new Thread(new ThreadStart(DoWord)); thread.Start(); 2 ...