更新时间:2018/10/26 上午11:30:12
更新说明:
1.修复一些逻辑上的错误
2.配置参数和返回值的优化,时间部分都改为date对象
3.新增一些配置参数
发布时间:2018-8-7 0:04
1.先引入样式和js
<link rel="stylesheet" type="text/css" href="css/timePlay.css"/> <script src="http://www.jq22.com/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();