jQuery时间轴播放(原创)


5785 | 304  | 608 | 添加收藏 上一个 下一个
资源描述 : 公司项目的需求,一个环境监测系统,要求做一个时间轴自动播放插件,根据时间渲染地图
jQuery时间轴播放(原创)
资源详情

使用方法


1.先引入样式和js


<link rel="stylesheet" type="text/css" href="css/timePlay.css"/>
<script src="jquery/jquery-1.10.2.js"></script>
<script src="js/timePlay.js" type="text/javascript" charset="utf-8"></script>

2.写一个时间轴容器


<div id="timePlay"></div>

3.调用插件


var timeplay = new TimePlay({
    speed: 2000, //播放速度
    startDate: 20180701, //开始日期
    endDate: 20190131, //结束日期
    timeUnitControl: true, //是否显示时/天切换控件
    onClickChangeEnd: function() { //点击后回调
        //获取点击的时间
        var hour = timeplay.curr_day.hour, //小时
            day = timeplay.curr_day.day, //日
            mon = timeplay.curr_day.mon, //月
            year = timeplay.curr_day.year; //年
        console.log(year + "年" + mon + "月" + day + "日" + hour + "时");
    },
    onAnimateEnd: function() { //时间轴动画每次结束回调
        var hour = timeplay.curr_day.hour, //小时
            day = timeplay.curr_day.day, //日
            mon = timeplay.curr_day.mon, //月
            year = timeplay.curr_day.year; //年
        console.log(year + "年" + mon + "月" + day + "日" + hour + "时");
    }
});

4.因为渲染不是瞬间完成,有时候时间到还没完成渲染,这时候就需要延迟一下动画


	
timeplay.delayAnimation();

待渲染完成后再继续动画


timeplay.continueAnimation();


指尖代码 资源每日更新 www.zjdaima.com