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

halfming

引用和评论

30天web实践3-yeoman