前端实现文字滚动效果

1. 文字由左往右匀速滚动，鼠标放入时文字停止滚动，移出后继续滚动。(上一条文案完全移出容器后下一条文案才开始从左边往右移动，所以实现的时候会在两条文案的dom之间加一个空的dom)

   
   

下面的实现方案主要是用了定时器setInterval不断的改变transform在X轴的值。

代码如下：

    var translateX = 0;
    var scrollboxLength=  $('.basicInfoWrapper .scroll-wrapper').width();
    var adNum = parseInt($('.ad-num').html());
    var itemTotalLenth = 0;
    if(adNum>0){
        for(var i=0;i

2.文字由下往上匀速滚动，鼠标放入时文字停止滚动，移出后继续滚动。
主要是用了定时器setInterval不断的改变transform在Y轴的值。
代码如下：
var fscrollboxH =  $('.scroll-wrapper.flagship-scroll').height();
var fscrolltextH = $('.scroll-wrapper.flagship-scroll .scroll-text').height();
var fscrollBegin = (fscrollboxH/2)+(fscrolltextH/2);
var fscrollY = fscrollBegin;     //初始位置

var fBasicInterval = setInterval(function () {
  fscrollY--
  if (fscrollY === -(fscrolltextH/2-fscrollboxH/2)) {
    fscrollY =  fscrollBegin;
  }
  $('.basicInfoWrapper .flagship-scroll .scroll-text').css({
    'transform': 'translateY(' + fscrollY + 'px)'
  })
}, 20)

$(".scroll-wrapper.flagship-scroll").mouseleave(function(){
  fBasicInterval = setInterval(function () {
    fscrollY--
    if (fscrollY === -(fscrolltextH/2-fscrollboxH/2)) {
      fscrollY =  fscrollBegin;
    }
    $('.basicInfoWrapper .flagship-scroll .scroll-text').css({
      'transform': 'translateY(' + fscrollY + 'px)'
    })
  }, 20)
});
$(".scroll-wrapper.flagship-scroll").mouseenter(function(){
  clearInterval(fBasicInterval);
});

3.文字由下往上滚动，文字由下跳入容器中间后停顿N秒时间再往上跳出容器消失，鼠标放入时文字停止跳动，移出后继续跳动。
这里主要是运用了swiper插件，代码如下：
    
    
        
            7分钟前，有人听过
            评分过低，注意风险！
            无效牌照，注意风险！
            疑似冒牌，建议远离！
        
    
var blackswiper = new Swiper('.black-scroll .swiper-container', {
  direction: 'vertical',    //垂直方向，由下往上
  autoplay: {                //自动轮播，每2秒播放一条
    delay: 2000
  },
  navigation: '',
  loop: true,
});

blackswiper.el.onmouseover = function(){  //鼠标放上暂停轮播
  blackswiper.autoplay.stop();
}
blackswiper.el.onmouseleave = function() {
  blackswiper.autoplay.start();
}