Github地址：https://github.com/dolymood/Timeline
效果圖：
image.png
1啊央、項(xiàng)目結(jié)構(gòu)
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>時(shí)間軸</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;
}
/*每一個(gè)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', //初始化時(shí)的時(shí)間
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,
// // 是否是由最近時(shí)間開(kāi)始
// reverseDate: false,
// // 鼠標(biāo)滾輪縮放
// mouseZoom: true,
// // 檢測(cè)resize
// checkResize: false,
// // 即使超出了也顯示當(dāng)前級(jí)別的所有日期
// showAllLevelDate: false
checkResize: true,
showAllLevelDate: true,
zoom: 38 //展開(kāi)到月
});
var tls = new TimelineSlider('#timelineSlideID', tl, {
// // 拆分panel差值
// panelDiffNum: 10,
// // 是否顯示所有events
// showAllEvents: true,
// // 檢測(cè)resize
// checkResize: false,
// // 左右切換時(shí)是否按panel切換
// navPanel: false,
// // 構(gòu)建單個(gè)項(xiàng)內(nèi)容
// buildItemContent: function(evt, index) {
// return '<img src="http://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>
