1、js
//滚动播放动画效果
animationUp();
function animationUp(){
let liDome = document.getElementsByClassName('item'),
ulDome = document.getElementsByClassName('list')[0],
lis = Array.prototype.slice.call(liDome),
liLen = lis.length,
$li = document.getElementsByClassName('item')[0],
$li2 = document.getElementsByClassName('item')[1],
$end = document.getElementsByClassName('item')[liLen-1],
$end2 = document.getElementsByClassName('item')[liLen-2],
i = 0;
console.log(liLen);
setInterval(()=>{
i = i+2;
if(i == liLen -2){
ulDome.style.marginTop = "-"+(i)*41+'px';
setTimeout(()=>{
i = 0;
ulDome.style.transitionDuration = null;
ulDome.style.marginTop = "-"+(i)*41+'px';
},3000)
}
if(i < liLen-2){
ulDome.style.transitionDuration = '2s';
ulDome.style.marginTop = "-"+(i)*41+'px';
}
},3000);
}
2、HTML
<div class="box">
<ul class="list">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
<li class="item">item5</li>
<li class="item">item6</li>
<li class="item">item7</li>
<li class="item">item8</li>
</ul>
</div>
3、css样式
.box{
width: 400px;
height: 88px;
overflow: hidden;
}
ul.list{
margin-top: -0px;
padding: 0;
}
ul>li{
list-style-type: none;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #EEEEEE;
}