文字的无缝上下滚动

这里引用了rem概念，利用rem实现移动端的自适应，附上flexible的链接。

这里实现了三种滚动方式，

• 单条数据高度 单条滚动
• 两条数据高度 单条滚动
• 两条数据高度 两条滚动

若是大家要实现3、4，...多条，可以根据提到的三种方式类推。

html:
<h1>1条显示滚动的文本字幕</h1>
<div class="marquee-wrap one">
    <ul class="marquee">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>
<h1>2条显示滚动的文本字幕 动1条</h1>
<div class="marquee-wrap double2-1">
    <ul class="marquee">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

<h1>2条显示滚动的文本字幕 动2条</h1>
<div class="marquee-wrap double2-2">
    <ul class="marquee">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

less：
@base: 75;

body{
    padding: 100rem / @base 30rem / @base 0;
}
.marquee-wrap{
    position: relative;
    width: 100%;
    height: 60rem / @base;
    margin-bottom: 200rem / @base;
    line-height: 60rem / @base;
    color: #000;
    background-color: pink;
    overflow: hidden;
}
ul{
    position: absolute;
    top:0;
    left: 0;
}
.one{
    .show-marquee{
        transition: all 0.5s;
        margin-top: -60rem / @base;
    }
}
.double2-1{
    height: 120rem / @base;
    .show-marquee{
        transition: all 0.5s;
        margin-top: -60rem / @base;
    }
}
.double2-2{
    height: 120rem / @base;
    .show-marquee{
        transition: all 0.5s;
        margin-top: -120rem / @base;
    }
}

css:

body {
  padding: 1.33333333rem 0.4rem 0;
}
.marquee-wrap {
  position: relative;
  width: 100%;
  height: 0.8rem;
  margin-bottom: 2.66666667rem;
  line-height: 0.8rem;
  color: #000;
  background-color: pink;
  overflow: hidden;
}
ul {
  position: absolute;
  top: 0;
  left: 0;
}
.one .show-marquee {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-top: -0.8rem;
}
.double2-1 {
  height: 1.6rem;
}
.double2-1 .show-marquee {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-top: -0.8rem;
}
.double2-2 {
  height: 1.6rem;
}
.double2-2 .show-marquee {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  margin-top: -1.6rem;
}

js:
$(function(){
        var showMarquee = function($el,cls,num){
            $el.addClass(cls);
            setTimeout(function(){
                var li = $el.find('li');
                if(num == '1'){
                    $el.append(li[0]);
                }else if(num == '2-1'){
                    $el.append($el.find('li')[0])

                }else if(num == '2-2'){
                    $el.append($el.find('li')[0]).append($el.find('li')[0])
                }
                
                $el.removeClass(cls);
            },500)
        }

        var timer1 = setInterval(function(){
            showMarquee($('.one .marquee'), 'show-marquee', '1')
        }, 2000);

        var timer2 = setInterval(function(){
            showMarquee($('.double2-1 .marquee'), 'show-marquee', '2-1')
        }, 2000);

        var timer3 = setInterval(function(){
            showMarquee($('.double2-2 .marquee'), 'show-marquee', '2-2')
        }, 2000);
})

效果：

上下无缝滚动.gif

codepen上的代码，点击这里