超炫的时间轴jquery插件Timeline Portfolio

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>

<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">

</div>

<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">

<div class="slider-item content">

<div class="text container">

<h2 class="start">Johnny B Goode</h2>

<p><em><span class="c1">Designer</span> & <span class=

"c2">Developer</span></em></p>

</div>

<div class="media media-wrapper media-container">

</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">

</div>

</div>

<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>

<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 class="navigation">

<div class="time">

</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>

初始化

$(function(){

var timeline = new VMM.Timeline();

timeline.init("data.json");

});

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

时间： 2024-10-05 05:02:22

超炫的时间轴jquery插件Timeline Portfolio

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

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

jcDate时间选取jQuery插件

盘点十个超炫的jQuery插件

助你简化开发的 jQuery 插件

纯css+js水平时间轴

基于jQuery的美食时间轴焦点图插件

jQuery时间轴插件：jQuery Timelinr

超酷的JavaScript叙事性时间轴(Timeline)类库

基于jQuery的时间轴鼠标悬停动画插件