30天web实践2-timelinejs
生活随笔
收集整理的這篇文章主要介紹了
30天web实践2-timelinejs
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
怎么說呢本來想看harp和yeoman
突然想做個好看的主頁 然后就去看timelinejs了
一上午真心搞不懂 我想引用本地josn
好吧 搞不定
還好最后找到一個低版本的timelinejs
這個方便多了。。。 效果還可以。。。
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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 湖北省孝感市谷歌高清卫星地图下载
- 下一篇： java做漂亮的游戏界面_java对打小