jQuery实现发展历程垂直时间轴方法

jQuery实现发展历程垂直时间轴方法

一款仿站长之家jQuery简单实用的垂直时间轴样式,适用于公司发展历程介绍时间轴代码。

使用方法
引入需要用到的jquery库文件jquery-1.7.2.min.js

1
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<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>

文件信息:

    2

    发表评论