时间轴运动

 截了一小段gif效果图，如下：

js代码，如下：

(function(win, $) {

    var $timeNode = $(".ewb-time-node"), //时间节点
        $timeData = $(".ewb-time-data", $timeNode), //时间节点上的具体时间
        $timeLine = $(".ewb-time-line"), //节点连接线
        $timeProgress = $(".ewb-time-progress", $timeLine); //连接线上进度条

    var curTime = Util.dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss'), //获取当前时间
        timeWdArr = [], //存放各个时间段宽度
        timeArr = [], //存放各个时间段
        timeDiffArr = []; //存放各个时间差

    // 获取每个时间段的宽度
    $timeLine.each(function(index, el) {
        timeWdArr.push($(this).width());
    });

    console.log(timeWdArr);

    // 计算时间差
    var timeDiff = function(time1, time2) {
        var d1 = new Date(time1.replace(/-/g, "/")),
            d2 = new Date(time2.replace(/-/g, "/"));
        return parseInt(d2 - d1) / 1000 //两个时间相差的秒数
    }

    // 获取时间段，并存入数组
    $timeData.each(function(index, el) {
        var txt = $(this).text();
        timeArr.push(txt);
    });

    console.log(timeArr);

    // 获取时间差，存入数组
    for (var i = 0; i <= timeArr.length - 2; i++) {
        timeDiffArr.push(timeDiff(timeArr[i], timeArr[i + 1]));
    }

    console.log(timeDiffArr);

    // 遍历时间段和当前时间比较，小于当前时间的高亮
    var num = 0;
    $.each(timeArr, function(index, val) {
        if (timeDiff(val, curTime) >= 0) {
            $timeNode.eq(index).addClass('cur').prev().addClass('cur');
            num = index; //获取最近一个高亮时间的索引号
        }
    });

    // 计算最近高亮时间段和当前时间的差
    var nowWd = timeDiff(timeArr[num], curTime),
        passLine = nowWd / timeDiffArr[num] * timeWdArr[num],
        surplusLine = timeWdArr[num] - passLine;
    $timeLine.eq(num).find('.ewb-time-progress').css("width", passLine + "px"); //设置已经走过的时间段的宽度

    console.log(surplusLine);
    var progressBar = function(number) {
        var stepLine = 1 / timeDiffArr[number] * timeWdArr[number], //计算每秒走多少距离
            tm = passLine;
        var t = setInterval(function() {
            tm += stepLine; //自身累加
            console.log(tm);
            $timeLine.eq(number).find('.ewb-time-progress').css({ //设置宽度
                width: tm + "px"
            });
            if (tm >= timeWdArr[number]) { //如果走动的距离大于或者等于时间段宽度，则清除定时器，清除走过的路程
                clearInterval(t);
                passLine = 0;
                $timeNode.eq(number + 1).addClass('cur');
                console.log(number + 1, timeArr.length)
                if ((number + 1) < timeArr.length - 1) { //判断是否为最后一段，如果不是，调用自身
                    progressBar(number + 1);
                }
            }
        }, 1000);
    }

    progressBar(num);

}(this, jQuery));