Vue2.0~3.0,实现滚动字幕

最新推荐文章于 2024-08-05 08:00:00 发布

不要卷了

最新推荐文章于 2024-08-05 08:00:00 发布

阅读量549

点赞数 1

分类专栏： vue、html 文章标签： html5 vue.js

本文链接：https://blog.csdn.net/m0_58100982/article/details/127305467

版权

vue、html 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

这里可以直接使用媒体标签：<marquee>

详细使用： <marquee direction="left" style="color:aliceblue;font-size:17px;position: absolute;">尊敬的会员你好！感谢您的再次使用！祝您生活愉快！</marquee>

direction：设置滚动方向

left：从右往左滚动

 <marquee direction="left" style="color:aliceblue;font-size:17px;position: absolute;">尊敬的会员你好！感谢您的再次使用！祝您生活愉快！</marquee>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不要卷了

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue2.0和3.0区别(总结版，不断更新)

Lemontree_fu的博客

05-22

3万+

一安装及版本切换查看当前版本，如果是2开头说明当前使用的是vue-cli2，3开头的话就是vue-cli4 vue --version 如果无法识别vue命令说明没有安装vue-cli，使用以下说明进行安装安装3.0版本: npm install -g vue-cli 安装3.0版本： npm install -g @vue/cli 版本切换，即卸载当前版本，安装另外的版本从2.0升级到3.0： npm uninstall -g vue-cli npm install

vue2.0与3.0共存

caoyuan258的博客

12-07

731

2 条评论您还未登录，请先登录后发表或查看评论

vue循环滚动字幕

sun13047140038的博客

09-21

1639

在这个示例中，我们使用setInterval每隔一段时间更新scrollOffset的值，通过改变translateX的值来实现滚动效果。当scrollOffset小于容器的负宽度时，将其重置为容器的宽度，以实现循环滚动。在Vue.js中创建一个循环滚动字幕的效果通常需要使用一些CSS和JavaScript来实现。接下来，在Vue实例中，可以使用setInterval来定期更新scrollOffset的值，以创建滚动效果。', // 您的滚动字幕文本。scrollSpeed: 1, // 调整滚动速度。

VUE实现从左到右滚动或从右至左滚动

05-31

VUE实现从左到右滚动或从右至左滚动可以是文字可以是图片

Vue3 列表自动滚动播放（表头固定、列表内容自动滚动播放）+ vue3-seamless-scroll - 附完整示例

最新发布

m0_48968874的博客

08-05

2489

vue3-seamless-scroll：Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。

【vue】字幕滚动

qq_40881695的博客

05-10

1267

字幕滚动

vue2实现列表数据字幕式循环滚动

io_123io_123的博客

04-25

698

vue2实现列表数据字幕式循环滚动

vue2实现歌词滚动

subsistent的博客

12-08

577

【代码】vue2实现歌词滚动。

vue 文字滚屏

c_qianxia5040的博客

03-25

335

1、通过animation使画面动起来 <template> <div class="con"> <div class="inner-container"> <p class="text" v-for="(text, index) in arr" :key="index">{{text}}</p> </div> </div> </template&

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

07-08

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/

08-14

Vue学习笔记——【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通-哔哩哔哩】 https://b23.tv/

Web前端Vue2.0 + Vue3.0 全套入门到精通教程

10-20

Web前端Vue2.0 + Vue3.0 全套入门到精通教程

Vue项目滚动字幕设置（根据路由区分界面）

smallteddy.blog.csdn.net

01-06

2280

1、代码 <div class="warning" v-if="this.$route.path === '/home'"> <div class="text">这是一个滚动字幕！这是一个滚动字幕！</div> </div> .warning { display: inline-block; width: 600px; height: 32px; border-radius: 32px; position: absolute; ma

vue实现文字滚动播放效果

string佳佳的博客

04-26

2798

原博地址，亲测此方法有效！！！效果图：实现方式：  <div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up': animateUp}"> <li v-for="(item, index) in listData" :key="index">{{item}}</li> </ul>

Vue中左右循环滚动文字或图片

行内元素如何居中

09-24

2084

<template> <div class="bottom_zj"> <div ref="innerref" class="outer-box" @mouseenter="mouseenter" @mouseleave="mouseleave" > <div ref="innerref1" class="inner-box1"> &lt

vue实现滚动字幕跑马灯效果

weixin_39531049的博客

07-07

1063

vue实现滚动字幕跑马灯效果 v 视图层 <div id="app"> <input type="button" value="浪起来" @click="start"> <input type="button" value="别浪" @click="stop"> <p style="width:200px;overflow: hidden;height:20px">{{msg}}</p>

教你用vue写一个跑马灯滚动字幕

qq_63625143的博客

01-16

674

跑马灯的原理主要就是在一个定时器里不断截取当前字符串的第一个字符，拼接到剩余字符后面，来实现跑马灯的效果，用disabled来防止按钮的二次点击。

Vue 制作滚动字幕，用于展示通知内容

Sunshine_Jian的博客

03-28

1793

1、场景：用于展示一些通知内容； 2、效果图： 3、步骤：第一步：引入 jQuery 和 jquery.marquee.js ; <script> import $ from "@/views/test/components/jquery-3.2.1.min.js"; import "@/views/test/components/jquery.marquee.min.js"; </script> 第二步：准备一个内容展示容器，并绑定数据 ..

Vue3文字实现左右和上下滚动

ZJ15981837003的博客

08-02

2387

Vue3文字实现左右和上下滚动

尚硅谷vue2.0 vue3.0笔记

10-19

尚硅谷是一家IT培训机构，他们提供了Vue2.0和Vue3.0的笔记。其中Vue2.0的笔记包括Vue2.0的响应式、组件化开发、路由、Vuex、axios等内容；而Vue3.0的笔记则包括Vue3.0的响应式、Composition API、新的生命周期钩子、自定义hook函数等内容。此外，他们还提供了使用vue-cli和vite创建Vue项目的教程。如果你想深入学习Vue框架，可以考虑参考尚硅谷的Vue2.0和Vue3.0笔记。