這里引用了rem概念，利用rem實(shí)現(xiàn)移動端的自適應(yīng)，附上flexible的鏈接。

這里實(shí)現(xiàn)了三種滾動方式，

• 單條數(shù)據(jù)高度 單條滾動
• 兩條數(shù)據(jù)高度 單條滾動
• 兩條數(shù)據(jù)高度 兩條滾動

若是大家要實(shí)現(xiàn)3、4，...多條，可以根據(jù)提到的三種方式類推。

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上的代碼，點(diǎn)擊這里