插件描述：公司项目的需求，一个环境监测系统，要求做一个时间轴自动播放插件，根据时间渲染地图
更新时间：2018/10/26 上午11:30:12
更新说明：
1.修复一些逻辑上的错误
2.配置参数和返回值的优化，时间部分都改为date对象
3.新增一些配置参数
发布时间：2018-8-7 0:04
使用方法
1.先引入样式和js
1 2 3 | <link rel="stylesheet" type="text/css" href="css/timePlay.css"/><script src="js/timePlay.js" type="text/javascript" charset="utf-8"></script> |
2.写一个时间轴容器
1 | <div id="timePlay"></div> |
3.调用插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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.因为渲染不是瞬间完成，有时候时间到还没完成渲染，这时候就需要延迟一下动画
1 | timeplay.delayAnimation(); |
待渲染完成后再继续动画
1 | timeplay.continueAnimation(); |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery简单下拉选择框插件(原创)
- 下一个特效： jQuery图片拖动排序和查看图集