【转】jquery特效：无缝向上循环滚动列表

原文链接：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);
}

JavaScript + jQuery 1.8.3 :

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);

来源：CSDN

作者：wsdhla

链接：https://blog.csdn.net/wsdhla/article/details/84998456

标签

jquery特效

nth-child

jquery