公司发展历程介绍时间轴jquery特效代码

lara梁心颐 2019-11-22 409 阅读

特效描述:jQuery 公司发展历程 垂直时间轴代码,jQuery公司发展历程介绍垂直时间轴代码

代码部署教程

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/time-axis.css"/>

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js">
</script>

3. HTML代码

<div class="main">
<ul class="time-axis">

</ul>

</div>

<script type="text/javascript">

//这是要遍历时间轴的数据
var dimeAxis=[{
date:'2003.10',
title:'初涉教育行业',
achievement:''
},
{
date:'2010.07',
title:'总公司成立',
achievement:''
},
{
date:'2010.12',
title:'第一套产品《创新大学英语 . 综合教程》系列教材出版 ',
achievement:'与华东师范大学出版社战略合作(创新大学英语教学平台)'
},
{
date:'2012.11',
title:'《创新大学英语》系列教材荣获“十二五”普通高等教育本科国家级规划教材',
achievement:''
},
{
date:'2013.06',
title:'与成都理工大战略合作(共同研发在线学习平台)',
achievement:'四川创图合作院校超过100所'
},
{
date:'2013.08',
title:'《创新高职英语》、《创新机电一体化》等系列教材荣获“十二五”职业教育国家规划教材',
achievement:''
},
{
date:'2014.12',
title:'成都厚博科技有限公司成立',
achievement:''
},
{
date:'2016.08',
title:'自主研发“创图教育在线”平台上线',
achievement:''
},
{
date:'2017.05',
title:'“创图教育在线”在合肥工业大学,重师大,云大等高校应用',
achievement:''
},
{
date:'2017.12',
title:'“创图教育在线”使用人数超过100万',
achievement:''
},
{
date:'2018.04',
title:'合作院校及企业超过400家',
achievement:''
}];
$(function(){
$.each(dimeAxis,function(i,e){
var html='<li class="time-axis-item">

'+
'<div class="time-axis-date">

'+e.date+'<span>

</span>

</div>

'+
'<div class="time-axis-title">

'+e.title+'</div>

'+
'<p class="time-axis-achievement">

'+e.achievement+'</p>

'+
'</li>

';
$('.time-axis').append(html);
});
});
</script>

演示地址下载地址

最新游戏