项目中需要一个时间轴,动态根据数据的多少,自动在页面中展示 , 项目用的vue,所以加在vue里
上代码 JQ部分
const app=new Vue({
data:{
timeData:[
{timeTxt:'2016-06-10',timeTitle:'时间轴标题1',timeContent:'时间轴内容1'},
{timeTxt:'2016-06-12',timeTitle:'时间轴标题2',timeContent:'时间轴内容2'},
{timeTxt:'2016-06-26',timeTitle:'时间轴标题3',timeContent:'时间轴内容3'},
{timeTxt:'2016-09-22',timeTitle:'时间轴标题4',timeContent:'时间轴内容4'},
{timeTxt:'2016-10-30',timeTitle:'时间轴标题5',timeContent:'时间轴内容5'},
{timeTxt:'2016-10-22',timeTitle:'时间轴标题6',timeContent:'时间轴内容6'},
{timeTxt:'2016-06-10',timeTitle:'时间轴标题1',timeContent:'时间轴内容1'},
],
},
}).$mount('#app');
$('.timezone').height($('#app>div:last').offset().top+100);
$('.timezone').css('-webkit-animation','heightSlide '+app.timeData.length/2+'s'+' linear')
var str=` @-webkit-keyframes heightSlide{
0%{
height: 0;
}
100%{
height: ${$('#app>div:last').offset().top+100};
}
}`
$(function(){
var $style=document.getElementsByTagName('style');
$style[0].append(str)
});
CSS部分
<style>
body{
background: #333;
}
h1{
text-align: center;
color:#fff;
}
.timezone{
width:6px;
height: '';
background: lightblue;
margin: 0 auto;
margin-top:50px;
border-radius: 3px;
position: relative;
}
.timezone:after{
content: '未完待续...';
width: 100px;
color:#fff;
position: absolute;
margin-left: -35px;
bottom: -30px;
-webkit-animation: showIn 4s ease;
}
.timezone .time,.timezone .timeLeft{
position: absolute;
margin-left: -10px;
margin-top:-10px;
width:20px;
height:20px;
border-radius: 50%;
border:4px solid rgba(255,255,255,0.5);
background: lightblue;
-webkit-transition: all 0.5s;
-webkit-animation: showIn ease;
}
@-webkit-keyframes showIn{
0%,70%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.timezone .time h2,.timezone .timeLeft h2{
position: absolute;
margin-left: -120px;
margin-top: 3px;
color:#eee;
font-size: 14px;
cursor:pointer;
-webkit-animation: showIn 3s ease;
}
.timezone .timeLeft h2{
margin-left: 60px;
width: 100px;
}
.timezone .time:hover,.timezone .timeLeft:hover{
border:4px solid lightblue;
background: lemonchiffon;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);
}
.timezone .time div,.timezone .timeLeft div{
position: absolute;
top:50%;
margin-top: -25px;
left:50px;
width: 300px;
/*height: 50px;*/
background: lightblue;
border:3px solid #eee;
border-radius: 10px;
z-index: 2;
overflow: hidden;
cursor:pointer;
-webkit-animation: showIn 3s ease;
-webkit-transition: all 0.5s;
}
.timezone .timeLeft div{
left:-337px;
}
.timezone .time div:hover,.timezone .timeLeft div:hover{
height: 170px;
}
.timezone .time div p,.timezone .timeLeft div p{
color: #fff;
font-weight: bold;
text-align: center;
}
.timezone .time:before,.timezone .timeLeft:before{
content: '';
position: absolute;
top:0px;
left: 32px;
width: 0px;
height: 0px;
border:10px solid transparent;
border-right:10px solid #eee;
z-index:-1;
-webkit-animation: showIn 3s ease;
}
.timezone .timeLeft:before{
left:-33px;
border:10px solid transparent;
border-left:10px solid #eee;
}
.timezone .time div ul,.timezone .timeLeft div ul{
list-style: none;
width:300px;
padding:5px 0 0;
border-top:2px solid #eee;
color:#fff;
text-align: center;
}
.timezone .time div li,.timezone .timeLeft div li{
display: inline-block;
height: 25px;
line-height: 25px;
}
.next{
top: 100px;
}
</style>
JS原生代码
const app=new Vue({
data:{
timeData:[
{timeTxt:'2016-06-10',timeTitle:'时间轴标题1',timeContent:'时间轴内容1'},
{timeTxt:'2016-06-12',timeTitle:'时间轴标题2',timeContent:'时间轴内容2'},
{timeTxt:'2016-06-26',timeTitle:'时间轴标题3',timeContent:'时间轴内容3'},
{timeTxt:'2016-09-22',timeTitle:'时间轴标题4',timeContent:'时间轴内容4'},
{timeTxt:'2016-10-30',timeTitle:'时间轴标题5',timeContent:'时间轴内容5'},
{timeTxt:'2016-10-22',timeTitle:'时间轴标题6',timeContent:'时间轴内容6'},
{timeTxt:'2016-06-10',timeTitle:'时间轴标题1',timeContent:'时间轴内容1'},
{timeTxt:'2016-06-12',timeTitle:'时间轴标题2',timeContent:'时间轴内容2'},
{timeTxt:'2016-06-26',timeTitle:'时间轴标题3',timeContent:'时间轴内容3'},
{timeTxt:'2016-09-22',timeTitle:'时间轴标题4',timeContent:'时间轴内容4'},
{timeTxt:'2016-10-30',timeTitle:'时间轴标题5',timeContent:'时间轴内容5'},
{timeTxt:'2016-10-22',timeTitle:'时间轴标题6',timeContent:'时间轴内容6'},
],
},
}).$mount('#app');
var timezoneBar=document.getElementsByClassName('timezone')[0]
var lastDiv=document.getElementById('app').lastChild;
timezoneBar.style.height=lastDiv.offsetTop+150+'px';
timezoneBar.style.webkitAnimation='heightSlide '+app.timeData.length/2.5+'s'+' linear'
var str=` @-webkit-keyframes heightSlide{
0%{
height: 0;
}
100%{
height: ${lastDiv.offsetTop+100};
}
}`;
window.onload = function () {
document.getElementsByTagName("style")[0].innerHTML+=str
};
感想
jq写多了,原生dom都忘了,整好重新写写 这个时间轴是左一个右一个 可以拓展 动态绑定class区分左右 还是不错的
