30天web实践2-timelinejs

来源：互联网发布：em231cn tc编程编辑：程序博客网时间：2024/05/17 07:22

怎么说呢本来想看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 一点也没修改放在这也没什么意义。。
想要的给我发邮件吧这个只是适合某个版本的配置最新版肯定不行
一个东西做大以后是功能多了但也难以理解了。。。

0 0