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插件，代码如下：
direction: 'vertical', //垂直方向，由下往上
autoplay: { //自动轮播，每2秒播放一条
delay: 2000
},
navigation: '',
loop: true,
});
blackswiper.el.onmouseover = function(){ //鼠标放上暂停轮播
blackswiper.autoplay.stop();
}
blackswiper.el.onmouseleave = function() {
blackswiper.autoplay.start();
}