时间轴插件

Github地址：https://github.com/dolymood/Timeline
效果图：
image.png
1、项目结构

image.png
2、具体需要的文件

2.1、css文件夹

image.png
2.2、js文件夹

image.png
2.3、img文件夹

image.png
3、html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>时间轴</title>

    <script type="text/javascript" src="./js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/timeline.css">
    <link rel="stylesheet" type="text/css" href="./css/timeline-slider.css">
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }

        img {
            vertical-align:top;
            display:inline-block;
        }

        #timelineID {
            margin:70px;
            height:45px;
        }
        #timelineSlideID {
            margin-top:50px;
            height:400px;
        }

        /*每一个item的样式*/
        .tls-item{
            width:150px;
            height: 100px;
        }

        /*图片大小*/
        .tls-item img {
            /*max-width:100%;
            max-height:100%;*/
            width:70px;
            height:70px;
            margin-left:40px;
        }

        /*图片下方的信息*/
        .tls-item span {
            display:inline-block;
        }
    </style>
</head>
<body>
    <div id="timelineSlideID"></div>
    <div id="timelineID"></div>

    <script type="text/javascript" src="./js/timeline.js"></script>
    <script type="text/javascript" src="./js/timeline-slider.js"></script>
    <script type="text/javascript">

    var timelineData = {
        focus_date: '2012-01-05 12:00',     //初始化时的时间
        events: [
            {
                id: "2011-11-05 12:00",
                name: "aaa",
                startDate: "2011-11-05 12:00",
                endDate: "2011-11-05 12:00",
                imgUrl:"F:/插件制作/test/img/1.png"
            },
            {
                id: "2012-02-01 12:00",
                name: "bbb",
                startDate: "2012-05-01 12:00",
                endDate: "2012-05-01 12:00",
                imgUrl:"F:/插件制作/test/img/2.png"
            },
            {
                id: "2013-06-01 12:00",
                name: "ccc",
                startDate: "2013-06-01 12:00",
                endDate: "2013-06-01 12:00",
                imgUrl:"http://s4.kuaipan.cn/i/4/135.png"
            }
        ]
    }
    
    var tl = new Timeline('#timelineID', timelineData, {
        // 最小zoom
        // minZoom: 1,
        // // 最大zoom
        // maxZoom: 50,

        // // 初始化zoom
        // zoom: 25,

        // // 是否是由最近时间开始
        // reverseDate: false,

        // // 鼠标滚轮缩放
        // mouseZoom: true,

        // // 检测resize
        // checkResize: false,

        // // 即使超出了也显示当前级别的所有日期 
        // showAllLevelDate: false

        checkResize: true,
        showAllLevelDate: true,
        zoom: 38    //展开到月
    });

    var tls = new TimelineSlider('#timelineSlideID', tl, {
        //  // 拆分panel差值
        // panelDiffNum: 10,

        // // 是否显示所有events
        // showAllEvents: true,

        // // 检测resize
        // checkResize: false,

        // // 左右切换时是否按panel切换
        // navPanel: false,

        // // 构建单个项内容
        // buildItemContent: function(evt, index) {
        //  return '<img src="//s4.kuaipan.cn/i/4/135.png"><span>' + evt.id + '</span>';
        // }
        
        checkResize: true,
        navPanel: true,
        buildItemContent: function(evt, index) {
            return `<img src=${evt.imgUrl}><br/><input onClick='itemClick(this)' type='checkbox' name=${evt.name} id=${evt.id}><span>${evt.startDate}</span>`;
        }
    });


    function itemClick(obj){
        console.log(obj);
    }
    </script>
</body>
</html>
1、项目结构

2、具体需要的文件

2.1、css文件夹

2.2、js文件夹

2.3、img文件夹

3、html代码

猜你喜欢
