本期教程是关于前端的，文字滚动效果怎么实现！
文末有给大家附视频教程，大家根据需求学习！
- 文字由左往右匀速滚动，鼠标放入时文字停止滚动，移出后继续滚动。(上一条文案完全移出容器后下一条文案才开始从左边往右移动，所以实现的时候会在两条文案的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();
-
}
HTML+CSS编程小白福音系列：https://pan.baidu.com/s/1m6T_pv6zJbES0Z2WY-DSXQ 提取码: e
2020jQuery入门教程全集：https://pan.baidu.com/s/1QPp3JwR8glenGr2ObRiVHg 提取码: dy
总结的比较全，网盘提取码不能放这里，学习前端的伙伴，可以留言哦！
回复：前端，找我领取视频教程！或者加我建的前端群545750342，要教程直接说，我一起发大家，就没有限制了，私信我的话，一天只能回5个伙伴！
转载：https://blog.csdn.net/GUDUzhongliang/article/details/109511170
查看评论