html页面代码:
<div class="time_axis">
<div class="time_box">
<div class="time_box_list">
<ul class="time_horizontal"></ul>
</div>
</div>
<ul class="flex_direction_nav"></ul>
</div>
css代码:
/*横向时间轴*/
.time_axis{
margin: 20px 20px 20px 20px;
width: 93%;
height: 150px;
}
.time_axis .time_box{
position: relative;
visibility: visible;
animation-delay: 0.4s;
animation-name: zoomIn;
}
.time_axis .time_box .time_box_list{
overflow: hidden;
}
.time_axis .time_box .time_box_list::before{
position: absolute;
top: 20px;
right: 0;
left: 0;
border-top: 1px solid #C7C7C7;
content: '';
}
.time_horizontal{
width: 1000%;
transition-duration: 0s;
transform: translate3d(0px, 0px, 0px);
}
.time_horizontal li {
float: left;
position: relative;
text-align: center;
width: 200px;
padding-top: 40px;
}
.time_horizontal li b::before {
content: attr(data-title);
color: #fff;
font-weight: 400;
padding-top: 8px;
position: absolute;
top: 0;
left: 40.4%;
width: 40px;
height: 40px;
border: 2px solid #7ec836;
border-radius: 50%;
background: #7ec836;
}
.flex_direction_nav{
padding: 0;
margin: 0;
list-style: none;
top: 100px;
position: absolute;
}
.flex_direction_nav a{
position: absolute;
top: 50%;
width: 48px;
height: 160px;
line-height: 160px;
overflow: hidden;
margin-top: -80px;
font-size: 50px;
font-family: simsun;
color: #666;
text-align: center;
}
.flex_direction_nav a:hover, .flex_direction_nav a:focus{
text-decoration: none;
}
.flex_direction_nav .flex_next{
right: -700px;
}
.flex_direction_nav .flex_prev{
left: -20px;
}
js代码:
// 获取时间轴上需要显示的数据
function getEarlyWarningInfo(){
let _this = this;
$.ajax({
url: commonJs.HCFlood + "/waterpointReason/list?isActive=2",
type: "POST",
contentType: "application/json",
dataType: "JSON",
success: function(res){
if(res.status == 200){
if(res.data.list.length != 0){
let data = res.data.list[0];
let startTime = commonJs.timeStamp2String(data.startTime);
// 添加开启节点
$(".time_horizontal").append(`
<li class="time_horizontal_part">
<b data-title="启动"></b>
开启<br/>
${data.name}<br/>
${startTime}
</li>
`);
_this.timeAxis(data.id); // 时间轴展示
}
}
}
});
}
// 时间轴展示
function timeAxis(id){
$.ajax({
url: commonJs.HCFlood + "/waterpointReasonLog/list?warningId=" + id,
type: "POST",
contentType: "application/json",
dataType: "JSON",
success: function(res){
if(res.status == 200){
let data = res.data.list;
if(data.length != 0){
let html = "";
for(let i = 0; i < data.length; i++){
let time = commonJs.timeStamp2String(data[i].createTime);
html += `
<li class="time_horizontal_part" title="${data[i].operation}">
<b data-title="变更"></b>
${data[i].waterpointReasonName}<br/>
${time}
</li>
`;
}
// 如果获取的数据长度大于2(实际长度已经为3了,因为有个启动节点),显示左右切换按钮
if(data.length > 2){
$(".flex_direction_nav").append(`
<li class="flex_nav_prev"><a class="flex_prev" href="#"><</a></li>
<li class="flex_nav_next"><a class="flex_next" href="#">></a></li>
`);
}
$(".time_horizontal").append(html);
}
}
}
});
}
超出三个进程,显示左右滑动按钮,可以点击进行翻页滑动的显示:
// 时间轴滑动
$(document).on("click", ".flex_next", function(){
let liNum = $(".time_horizontal_part").length;
let boxWidth = $(".time_horizontal_part").width() * liNum;
let moveWidth;
let rightWidth = $(".time_horizontal li").css("right").replace("px", "");
boxWidth = boxWidth - rightWidth;
if(boxWidth / 600 > 2){
moveWidth = parseInt(rightWidth) + 600;
$(".time_horizontal li").css("right", moveWidth);
}else{
moveWidth = parseInt(boxWidth - 600) + parseInt(rightWidth);
$(".time_horizontal li").css("right", moveWidth);
}
});
$(document).on("click", ".flex_prev", function(){
let liNum = $(".time_horizontal_part").length;
let boxWidth = $(".time_horizontal_part").width() * liNum;
let moveWidth;
let rightWidth = $(".time_horizontal li").css("right").replace("px", "");
if(rightWidth / 600 > 1){
moveWidth = rightWidth - 600;
$(".time_horizontal li").css("right", moveWidth);
}else{
$(".time_horizontal li").css("right", 0);
}
});
页面展示效果:
参考来源:http://code_demo.moyublog.com/code/5dc99ae2eb988/index.html
今天的文章横向时间轴的实现分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/62809.html