注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

超炫的时间轴jquery插件Timeline Portfolio

jQuery插件 fishcity 4260浏览

超炫的时间轴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>

        <!-- 默认的 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部分请参考实例或是到官方查看,在此不多作解释。

转载请注明:jQ酷 » 超炫的时间轴jquery插件Timeline Portfolio

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。