好资源导航 » 文章资讯 » vue 实现走马灯效果

vue 实现走马灯效果

2023-08-10 07:19:04 76

Part.1 问题

在写一个H5页面时遇到一个需求，头部公告需要滚动变换，需要实现一个走马灯效果

Part.2 实现

我的做法：利用定时器+CSS3变换公告数组的顺序从而实现走马灯效果

Part.3 代码

HTML

CSS


.home{
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.home-box{
width:200px;
height:200px;
}
.marquee{
width:100%;
height:30px;
align-items:center;
color:#3A3A3A;
background-color:#fdfbde;
display:flex;
box-sizing:border-box;
}

.marquee_box{
display:block;
position:relative;
width:60%;
height:30px;
overflow:hidden;
}

.marquee_list{
display:block;
position:absolute;
top:0;
left:0;
}

.marquee_top{
transition:all0.5s;
margin-top:-30px
}

.marquee_listli{
height:30px;
line-height:30px;
font-size:12px;
padding-left:20px;
}

.marquee_listlispan{
padding:02px;
color:#f1543a;
}

Part.4 注意点

在js中我使用的是 setInterval中利用setTimeout来调用方法

方法详解：

setInterval ——会不停的调用函数

setTimeout——只会执行函数一次

这么写的原因：

如果单纯的使用setInterval会导致页面卡死，原因与JS引擎线程有关(有兴趣的童鞋可以研究一下)，setInterval 不会清除定时器队列，每次重复执行会导致定时器叠加，最终卡死网页。而setTimeout是自带清除定时器的

Part.5 效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue 实现走马灯效果

热门推荐

随机推荐