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>
网友评论