使用vue制作一个跑马灯效果

2024-10-27 05:49:41

1、下图是小编这个小的跑马灯项目的目录结构,在根目录下的lib文件夹中放一个vue的js,然后创建一个跑马灯的html,如下图:

使用vue制作一个跑马灯效果

3、下图是小编script中的代码,这里主要是创建vue等,接下来开始具体说明其中的作用,如下图:

使用vue制作一个跑马灯效果

5、下图是启动按钮的代码,这里是判断当前全局的定时器id是否有值,如果有值,说明当前定时器已经启动,不需要再次启动,如果没有值,则开始启动,如下图:

使用vue制作一个跑马灯效果

7、然后启动浏览器,点击按钮查看字符串的跑马灯效果,如下图:

使用vue制作一个跑马灯效果
猜你喜欢