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. PAT (Advanced Level) 1041. Be Unique (20)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  2. Cow Hopscotch

    Cow Hopscotch 题目描述 Just like humans enjoy playing the game of Hopscotch, Farmer John's cows have inv ...

  3. python之路：进阶篇

     > ) {        ;    }    printf(;} print i >>>      >>>  == :    name  ==   ==   ...

  4. Inside dependency property

    依赖属性的定义,分为3步(以PresentationFramework中的System.Windows.Controls.Button为例) 1.  声明依赖属性 public static read ...

  5. Nginx安装及配置虚拟主机

    nginx安装部分 依赖环境 yum -y install gcc zlib openssl-devel zlib-devel 1. 下载好下面两个包:nginx-1.8.1.tar.gz pcre- ...

  6. (中等) POJ 1054 The Troublesome Frog，记忆化搜索。

    Description In Korea, the naughtiness of the cheonggaeguri, a small frog, is legendary. This is a we ...

  7. 关于LCD以及BMP和RGB565

    源: 关于LCD以及BMP和RGB565

  8. CodeForces 626B Cards

    瞎搞题...凭直觉+猜测写了一发,居然AC了.. #include<cstdio> #include<cstring> #include<cmath> #inclu ...

  9. Java 的Object类

    1.toString()是Objectde的方法,如果不重写,直接输出对象或者用对象调用toString()输出是会输出包名.类名@对象哈希码的无符号十六进制表示 子类如果重写了这个方法,可以隐式调用 ...

  10. 3D VR卡镜的使用方法

    先把它展开 然后把它卡在手机中间 介绍一个VR游戏资源 Chair In a Room,这是一个立体沉浸式的3D游戏,原理是陀螺仪传感器随着手机转动可以观察整个三维房间 如图所示,点击进入,将两眼放到 ...