js也可以实现,但css3更加的平滑和资源占用更少。下面是具体代码,动画要单独用一个类名,否则暂停估计不会生效:
原理:动画向上移动,目标完全消失后,从头开始,注意 动画移动高度是文本高度,这个不好控制要微调,如果文本是动态的则要把动画通过js生成动态设置移动高度。js实现是获取消失的部分,添加到尾部,周而复始,平滑度很难控制
<div class="list">
<div class="rowup anim">
<div class="text">
<div>1111111111111111111111111111111111111111111111:</div>
<div>11111111111111111111111111111111111</div>
<div>222222222222222222222222222222222。</div>
</div>
<div class="text">
<div>1111111111111111111111111111111111111111111111:</div>
<div>11111111111111111111111111111111111</div>
<div>222222222222222222222222222222222。</div>
</div>
</div>
</div>
.list {
position: relative;
width: 200px;
height: 127px;
overflow: hidden;
color: #FFFFFF;
border: 1px solid white;
text-align: left;
}
.list .rowup {
height: 127px;
position: relative;
}
.anim {
animation: 5s rowup linear infinite normal;
}
/*暂停*/
.pause {
animation-play-state: paused;
}
@keyframes rowup {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -167px, 0);/*文本高度*/
}
}
$(".rowup").hover(function(){
$(this).addClass('pause')
},function(){
$(this).removeClass('pause')
})