HTML学习：前端实现文字滚动效果（附视频教程）_html文字轮播代码

下面的实现方案主要是用了定时器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秒时间再往上跳出容器消失，鼠标放入时文字停止跳动，移出后继续跳动。

一、网安学习成长路线图

网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

二、网安视频合集

观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。

三、精品网安学习书籍

当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。

四、网络安全源码合集+工具包

光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。

五、网络安全面试题

最后就是大家最关心的网络安全面试题板块

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以点击这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！