超炫的时间轴jquery插件Timeline Portfolio

最新推荐文章于 2024-08-09 07:06:43 发布

weixin_33869377

最新推荐文章于 2024-08-09 07:06:43 发布

阅读量855

点赞数

文章标签： json javascript ViewUI

Timeline Portfolio是一款按时间顺序专业显示事件的jquery 时间轴插件，可以根据时间的先后嵌入各种媒体包括微博,视频和地图等。这个展现的模式非常适合设计师的作品集和个人简历的展示。Timeline Portfolio使用jquery和CSS3封装的非常棒，插件通过读取data.json文件来写入文档中，这样，您需要根据自己的需求设计下页面，然后再修改data.json里面的数据为自己的就可以实现一个超炫的时间轴网站了。

jquery插件实例：超炫的时间轴jquery插件Timeline Portfolio

创建html

 
       <!DOCTYPE html> 
      
       < 
       html 
       > 
      
       < 
       head 
       > 
      
       < 
       meta  
       charset 
       = 
       "utf-8"  
       /> 
      
       < 
       title 
       >Timeline Portfolio | Tutorialzine Demo</ 
       title 
       > 
      
       <!-- 默认的 timeline 样式 --> 
      
       < 
       link  
       rel 
       = 
       "stylesheet"  
       href 
       = 
       "assets/css/timeline.css"  
       /> 
      
       <!-- 自定义主题 --> 
      
       < 
       link  
       rel 
       = 
       "stylesheet"  
       href 
       = 
       "assets/css/styles.css"  
       /> 
      
       <!-- 字体 --> 
      
       < 
       link  
       rel 
       = 
       "stylesheet"  
       href 
       = 
       "http://fonts.useso.com/css?family=Dancing+Script|Antic+Slab"  
       /> 
      
       <!--[if lt IE 9]> 
      
       <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> 
      
       <![endif]--> 
      
       </ 
       head 
       > 
      
       < 
       body 
       > 
      
       < 
       div  
       id 
       = 
       "timeline" 
       > 
      
       <!-- Timeline 自动生成的内容 --> 
      
       </ 
       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 
       >

head区引入了timeline默认样式timeline.css和自定义样式styles.css，在小于IE9的情况下加载了 html5shiv。在底部引入了jquery库、timeline插件和初始化代码script.js。当调用插件的时候，插件会查找ID为 timeline的div，并把从data.json读到的内容按格式添加到该div中。以下为内容格式代码：

 
       < 
       div  
       class 
       = 
       "container main"  
       id 
       = 
       "timeline" 
       > 
      
       < 
       div  
       class 
       = 
       "feature slider"  
       style 
       = 
       "overflow-y: hidden;" 
       > 
      
       < 
       div  
       class 
       = 
       "slider-container-mask slider-container slider-item-container" 
       > 
      
       <!-- The divs below are the events of the timeline --> 
      
       < 
       div  
       class 
       = 
       "slider-item content" 
       > 
      
       < 
       div  
       class 
       = 
       "text container" 
       > 
      
       < 
       h2  
       class 
       = 
       "start" 
       >Johnny B Goode</ 
       h2 
       > 
      
       < 
       p 
       >< 
       em 
       >< 
       span  
       class 
       = 
       "c1" 
       >Designer</ 
       span 
       > &amp; < 
       span  
       class 
       = 
      
       "c2" 
       >Developer</ 
       span 
       ></ 
       em 
       ></ 
       p 
       > 
      
       </ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "media media-wrapper media-container" 
       > 
      
       <!-- 图片或媒体视频 --> 
      
       </ 
       div 
       > 
      
       </ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "slider-item content content-container" 
       > 
      
       < 
       div  
       class 
       = 
       "text container" 
       > 
      
       < 
       h2  
       class 
       = 
       "date" 
       >March 2009</ 
       h2 
       > 
      
       < 
       h3 
       >My first experiment in time-lapse photography</ 
       h3 
       > 
      
       < 
       p 
       >Nature at its finest in this video.</ 
       p 
       > 
      
       </ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "media media-wrapper media-container" 
       > 
      
       <!-- Images or other media go here --> 
      
       </ 
       div 
       > 
      
       </ 
       div 
       > 
      
       <!-- More items go here --> 
      
       </ 
       div 
       > 
      
       <!-- Next 箭头按钮--> 
      
       < 
       div  
       class 
       = 
       "nav-next nav-container" 
       > 
      
       < 
       div  
       class 
       = 
       "icon" 
       ></ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "date" 
       >March 2010</ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "title" 
       >Logo Design for a pet shop</ 
       div 
       > 
      
       </ 
       div 
       > 
      
       <!-- Previous 箭头按钮--> 
      
       < 
       div  
       class 
       = 
       "nav-previous nav-container" 
       > 
      
       < 
       div  
       class 
       = 
       "icon" 
       ></ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "date" 
       >July 2009</ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "title" 
       >Another time-lapse experiment</ 
       div 
       > 
      
       </ 
       div 
       > 
      
       </ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "navigation" 
       > 
      
       <!-- 各事件的标题缩略图--> 
      
       < 
       div  
       class 
       = 
       "time" 
       > 
      
       <!-- The timeline numbers go here --> 
      
       </ 
       div 
       > 
      
       </ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "timenav-background" 
       > 
      
       < 
       div  
       class 
       = 
       "timenav-line"  
       style 
       = 
       "left: 633px;" 
       ></ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "timenav-interval-background top-highlight" 
       ></ 
       div 
       > 
      
       </ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "toolbar"  
       style 
       = 
       "top: 27px;" 
       > 
      
       < 
       div  
       class 
       = 
       "back-home icon"  
       title 
       = 
       "Return to Title" 
       ></ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "zoom-in icon"  
       title 
       = 
       "Expand Timeline" 
       ></ 
       div 
       > 
      
       < 
       div  
       class 
       = 
       "zoom-out icon"  
       data-original-title 
       = 
       "Contract Timeline" 
       ></ 
       div 
       > 
      
       </ 
       div 
       > 
      
       </ 
       div 
       > 
      
       </ 
       div 
       >

初始化

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