html 在线文字滑动效果,前端实现文字滚动效果

文字由左往右匀速滚动，鼠标放入时文字停止滚动，移出后继续滚动。(上一条文案完全移出容器后下一条文案才开始从左边往右移动，所以实现的时候会在两条文案的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

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插件，代码如下：

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

}