原文链接:https://segmentfault.com/a/1190000000701184
预期效果:
整个列表间隔设定的时间向上移动一个item的高度
实现思路:
获得js-slide-list下第一个li元素的高度,对它的height或marginTop进行一个从有到无的动画变化,代码如下:
html:
<div class="slide-title">
<span>title1</span>
<span>title2</span>
<span>title3</span>
</div>
<div class="slide-container">
<ul class="slide-list js-slide-list">
<li class="odd"><span>item1</span><span>item1</span><span>item1</span></li>
<li class="even"><span>item2</span><span>item2</span><span>item2</span></li>
<li class="odd"><span>item3</span><span>item3</span><span>item3</span></li>
<li class="even"><span>item4</span><span>item4</span><span>item4</span></li>
</ul>
</div>
css:
.slide-title{
background: rgba(0,0,0,.5);
color: #fff;
height: 34px;
line-height: 34px;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
}
.slide-title span{
float: left;
margin-right: 14px;
}
.slide-title span:nth-child(1),
.slide-list li span:nth-child(1){
width: 60px;
}
.slide-title span:nth-child(2),
.slide-list li span:nth-child(2){
width: 90px;
}
.slide-title span:nth-child(3),
.slide-list li span:nth-child(3){
width: 90px;
margin-right: 0px;
}
.slide-container{
position: relative;
overflow: hidden;
height: 90px;
}
.slide-list{
position:absolute;
width:100%;
left:0;
top:0;
color:#000;
margin:0;
padding:0;
}
.slide-list li {
height:30px;
line-height:30px;
list-style:none;
margin:0;
padding:0 10px;
}
.slide-list li span {
display:inline-block;
margin-right:14px;
font-size:12px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.slide-list li.odd{
background: rgba(51,79,109,.3);
}
.slide-list li.even{
background: rgba(51,79,109,.1);
}
var doscroll = function(){
var $parent = $('.js-slide-list');
var $first = $parent.find('li:first');
var height = $first.height();
$first.animate({
height: 0
}, 500, function() {
$first.css('height', height).appendTo($parent);
});
};
setInterval(function(){doscroll()}, 2000);