如何实现单行文字向上滚动的效果（附代码）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何实现单行文字向上滚动的效果（附代码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2127字，纯文字阅读大概需要4分钟。
内容图文
这篇文章给大家介绍的内容是关于如何实现单行文字向上滚动的效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在做一个活动页，需要一个单行文字向上滚动的效果来展示获奖公告。
效果如下：
废话不多说，下面直接贴上代码。
html代码如下：
<div class="notice">
<img src="./img/notice.png" alt="">
<div class="wrap">
<ul :style="{top: noticeTop + 'rem'}" :class="{transitionTop: isActive}">
<li v-for="(item, index) in noticeList" :key="index">{{item.phone}}抽中{{item.prizeName}}</li>
<li v-if="noticeLen > 0">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
<li v-if="noticeLen === 1">{{noticeList[0].phone}}抽中{{noticeList[0].prizeName}}</li>
<li v-if="noticeLen === 0">获奖公告</li>
</ul>
</div>
</div>less代码如下：
.notice{
display: flex;
justify-content: center;
padding-bottom: .26rem;
img{
width: .3rem;
height: .24rem;
}
.wrap{
position: relative;
height:.3rem;
overflow: hidden;
margin-left: .15rem;
font-size: .24rem;
color: #391b03;
}
ul{
position: relative;
top: -.3rem;
li{
height: .3rem;
line-height: .3rem;
}
}
.transitionTop{
transition: top 200ms ease-in-out;
}
}js代码如下：
// data下
noticeTop: 0, // 公告top值
isActive:true, // 是否显示transitionTop动画
timer: null, // 公告滚动定时器
noticeList: [
{
phone:'135****1234',
prizeName:'50元还款券'
},
{
phone:'135****1234',
prizeName:'60元还款券'
},
{
phone:'135****1234',
prizeName:'70元还款券'
}
], // 公告列表
// computed下
noticeLen(){ // 公告列表长度
return this.noticeList.length;
}
//methods下
noticeScroll(){// 公告滚动，定时改变公告的top值
if(this.noticeLen > 0){
let index =1,
len = this.noticeLen === 1 ? 3 : (this.noticeLen + 1);
this.timer = setInterval(() => {
this.isActive = true;
this.noticeTop = -3 * index / 10;
index ++;
if(index === len){// 滚动到底部时返回
let delayTime = setTimeout(() => {
this.isActive = false;
this.noticeTop = 0;
index = 1;
clearTimeout(delayTime);
}, 1000);
}
}, 3000);
}
}
//调用
this.noticeScroll();需要说明的是：
1.项目是基于vue的语法
2.滚动到底部返回时加了个延迟，是为了能滚动到最后一个，然后从最后一个返回到第一个。
相关文章推荐：
css3怎么实现页面滚动动画特效？
怎么用css3制作样式好看的按钮？
以上就是如何实现单行文字向上滚动的效果（附代码）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的如何实现单行文字向上滚动的效果（附代码）全部内容，希望文章能够帮你解决如何实现单行文字向上滚动的效果（附代码）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。