前端實現文字滾動效果

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<adNum;i++){
            var j=(i*2)+2;
            var scrollItemLength = $('.basicInfoWrapper .scroll-text .scroll-item:nth-child('+j+')').width();

            itemTotalLenth += scrollItemLength;
        }
    }

    var scrollLenth= itemTotalLenth + (adNum*scrollboxLength);

    var basicInterval = setInterval(function () {
        translateX++

        if (translateX === (scrollLenth)) {
            translateX =  0;
        }
        $('.basicInfoWrapper .scroll-text').css({
            'transform': 'translateX(-' + translateX + 'px)'
        })
    }, 20)


$(".basicInfoWrapper .scroll-wrapper").mouseleave(function(){
    basicInterval = setInterval(function () {
        translateX++
        if (translateX === (scrollLenth)) {
            translateX =  0;
        }
        $('.basicInfoWrapper .scroll-text').css({
            'transform': 'translateX(-' + translateX + 'px)'
        })
    }, 20)
});
$(".basicInfoWrapper .scroll-wrapper").mouseenter(function(){
    clearInterval(basicInterval);
});

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外掛，程式碼如下：

<div class="scroll-wrapper black-scroll">
    <div class="icon"></div>
    <div class="swiper-container scroll-text">
        <div class="swiper-wrapper">
            <div class="swiper-slide">7分鐘前，有人聽過</div>
            <div class="swiper-slide">評分過低，注意風險！</div>
            <div class="swiper-slide">無效牌照，注意風險！</div>
            <div class="swiper-slide">疑似冒牌，建議遠離！</div>
        </div>
    </div>
</div>

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