使用Vue制作跑马灯效果

最新推荐文章于 2023-05-19 16:38:32 发布

你最可爱521

最新推荐文章于 2023-05-19 16:38:32 发布

阅读量323

点赞数 1

分类专栏： Vue 文章标签： javascript vue

本文链接：https://blog.csdn.net/qq_44184794/article/details/106911777

版权

下图所示，就是跑马灯特效

  很多网站的广告就有这样的特效

在这里插入图片描述

思路：

点击开始按钮，开始定时器；
定时器的回调函数使得文字动起来；
回调函数中使用substring()函数，从第二个字符开始截取，然后拼接上第一个字符；
每500ms执行一次回调函数，产生动态效果；
点击暂停，清除定时器

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

最低0.47元/天解锁文章

你最可爱521

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用Vue制作跑马灯效果

下图所示，就是跑马灯特效很多网站的广告就有这样的特效思路：点击开始按钮，开始定时器；定时器的回调函数使得文字动起来；回调函数中使用substring()函数，从第二个字符开始截取，然后拼接上第一个字符；每500ms执行一次回调函数，产生动态效果；点击暂停，清除定时器代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n
复制链接

扫一扫

专栏目录