30天web实践2-timelinejs

怎么说呢本来想看harp和yeoman
突然想做个好看的主页然后就去看timelinejs了
一上午真心搞不懂我想引用本地josn
好吧搞不定
还好最后找到一个低版本的timelinejs
这个方便多了。。。效果还可以。。。

half@half-All-Series:~/Downloads/timeline-portfolio/timeline-portfolio$ ls -R
.:
assets  data.json  index.html
./assets:
css  js
./assets/css:
timeline.css  timeline.png
./assets/js:
script.js  timeline-min.js

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Timeline Portfolio | Tutorialzine Demo</title>
<!-- The default timeline stylesheet -->
<link rel="stylesheet" href="assets/css/timeline.css" />
<!-- Our customizations to the theme -->
<!-- Google Fonts -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<a href=""></a>
</header>
<div id="timeline">
<!-- Timeline.js will genereate the markup here -->
</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>

data.json 抄了的内容也不改了

{
"timeline":
{
"headline":"halfming",
"type":"default",
"startDate":"2009,1",
"text":"<i><span class='c1'>Designer</span> & <span class='c2'>Developer</span></i>",
"asset":
{
"media":"",
"credit":"",
"caption":""
},
"date": [
{
"startDate":"2009,2",
"headline":"My first experiment in time-lapse photography",
"text":"Nature at its finest in this video.",
"asset":
{
"media":"http://vimeo.com/22439234",
"credit":"<a href='http://dribbble.com/shots/401334-Sidebar'>by Chris Brauckmuller</a>",
"caption":""
}
},
{
"startDate":"2009,5",
"headline":"Redesign of my portfolio",
"text":"",
"asset":
{
"media":"http://dribbble.com/system/users/5977/screenshots/401334/sidebar_s3.png?1327615765",
"credit":"<a href='http://dribbble.com/shots/401334-Sidebar'>by Chris Brauckmuller</a>",
"caption":""
}
},
{
"startDate":"2009,7",
"headline":"Another time-lapse experiment",
"text":"",
"asset":
{
"media":"http://vimeo.com/23237102",
"credit":"",
"caption":""
}
},
{
"startDate":"2009,10",
"headline":"Developed a Gmail Client",
"text":"",
"asset":
{
"media":"http://dribbble.com/system/users/2559/screenshots/120088/shot_1298590416.jpg?1309796199",
"credit":"<a href='http://dribbble.com/shots/120088-Gmail-Pokki-Final-Ui'>by Justalab</a>",
"caption":""
}
}
]
}
}

js/script.js

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

timeline.css timeline-min.js 一点也没修改放在这也没什么意义。。
想要的给我发邮件吧这个只是适合某个版本的配置最新版肯定不行
一个东西做大以后是功能多了但也难以理解了。。。

30天web实践2-timelinejs相关推荐

Web实践小项目（仅供参考）
一.前言这个小东西是web实践课的一个作业,只是要求纯前端,拼凑几个网页即可,故写的较为简陋,我选中的一个小方向是写一个系统的管理的,包括密码修改.操作人员管理.权限管理.人员信息.退出系统等一些列 ...
angularjs 开发流程_超级棒的30款web前端开发工具汇总，一定要收藏！
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
web实践小项目一:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...
腾讯 Flutter 跨平台 Web 实践
点击上方"开发者技术前线",选择"星标" 每天 14.00 在看 | 真爱来源:腾讯新闻前端团队 | 作者 SegmentFault Flutter是 ...
30个 Web 设计者必备的免费 PSD UI 工具包
寻找免费的资源和灵感可以是一件非常简单的任务.如果您是一名经验丰富的设计师,你知道最好的学习方法可以是寻找和学习其他人的工作.寻找PSD 文件可以是一种功能强大的有效率的方式学习,并满足你的工作需求的 ...
30道Web前端面试题，你能答出多少道？
如今很多人受到Web前端的诱惑纷纷报名来学Web前端,他们希望自己通过5个月的系统学习就获得能找到一份高工资的Web前端开发工作,但是真的有那么容易吗?你真的有与高工资相对应的能力吗?你想知道自己的技 ...
java web 实践项目（搭建web留言系统）
声明:这是实践java的第二个项目,它主要包括以下知识: 前端:html css javascript 服务端: tomcat服务器,servlet ,jsp 后端:java 数据库:mysql 这个 ...
web前端培训机构出来的能找到工作吗？30道Web前端面试题收藏版
Web前端高薪的诱惑,学习门槛低,无论是学生党还是工作者,都渴望着凭借着自己的能力,空余的时间,想学一下前端.或许是爱好,或许是想从事这份工作.但是真的那么容易吗?如今初级前端的工作,已经接近饱和,并 ...
全民K歌推流直播Web实践
背景 2020年受到疫情的影响,大众减少了线下娱乐,将更多的时间投入到了线上活动,直播行业迎来了一个小爆发,主播注册数量与线上观众不断增长.同时,在线直播演唱作为一种全新的演出模式,受到广大网友的好评 ...

30天web实践2-timelinejs

30天web实践2-timelinejs相关推荐

最新文章

热门文章