30天web實踐2-timelinejs

時間 2019-12-12

標籤 30天 web 實踐 timelinejs 欄目 HTML 简体版

原文原文鏈接

怎麼說呢原本想看harp和yeoman
忽然想作個好看的主頁而後就去看timelinejs了
一上午真心搞不懂我想引用本地josn
好吧搞不定
還好最後找到一個低版本的timelinejs
這個方便多了。。。效果還能夠。。。css

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

<!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 抄了的內容也不改了html5

{
    "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.jsjquery

$(function(){

    var timeline = new VMM.Timeline();
    timeline.init("data.json");

});

timeline.css timeline-min.js 一點也沒修改放在這也沒什麼意義。。
想要的給我發郵件吧這個只是適合某個版本的配置最新版確定不行
一個東西作大之後是功能多了但也難以理解了。。。json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。