文字播报上下滚动(转载)

https://www.jb51.net/article/188734.htm

本文详细的介绍了vue实现公告栏文字上下滚动效果的示例代码,具体入如下:
1.在项目结构的components中新建text-scroll.vue文件

{{text.val}}

2.在header-bar组件使用

transition标签

这里是动态组件

问题:
1.为什么用setInterval,而不是setTimeout
setInterval是循环执行,setTimeout是延迟执行。我们这里要的是setTimeout循环执行。通过嵌套setTimeout可以实现循环,但是每次都会注册一个计时器,然后时间上也是需要等当前setTimeout执行完再延迟比如说两秒执行,实际上就不只2s。
2.什么情况下setTimeout嵌套可以解决 setInterval 解决不了的问题
当计时器是高耗时的计算或者dom操作时,时间大于延迟时间

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用HTML和CSS来实现文字的上下滚动。以下是一个简单的示例: HTML代码: ``` <div class="scrolling-text"> <p>This text will scroll up and down.</p> </div> ``` CSS代码: ``` .scrolling-text { height: 100px; /* 设置容器高度 */ overflow: hidden; /* 隐藏超出容器高度的内容 */ } .scrolling-text p { margin: 0; /* 去除段落的margin */ line-height: 1.2; /* 设置行高,让文字垂直居中 */ animation: scroll 10s infinite alternate; /* 定义动画 */ } @keyframes scroll { from { transform: translateY(0); /* 初始状态 */ } to { transform: translateY(-50%); /* 最终状态 */ } } ``` 解释: - `height: 100px` 设置容器高度为100像素。 - `overflow: hidden` 隐藏超出容器高度的内容。 - `margin: 0` 去除段落的margin,让文字紧贴容器顶部。 - `line-height: 1.2` 设置行高为1.2倍,让文字垂直居中。 - `animation: scroll 10s infinite alternate` 定义一个名为`scroll`的动画,持续时间为10秒,无限循环,并且在每次循环中来回交替播放。`scroll`是自定义的动画名称,可以任意命名。 - `@keyframes scroll` 定义`scroll`动画的关键帧。 - `from { transform: translateY(0); }` 初始状态,文字不偏移。 - `to { transform: translateY(-50%); }` 最终状态,文字向上偏移50%的高度。 您可以根据自己的需要修改容器高度、动画持续时间等参数。同时,您也可以使用JavaScript来控制滚动速度和方向等更多细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值