vue根据文字长短展示跑马灯效果

已于 2024-07-02 16:20:29 修改
阅读量741 收藏 4
点赞数 14
分类专栏： Vue 文章标签： vue.js 前端 javascript marquee
于 2024-07-01 16:33:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOONCOM/article/details/140104458
版权

介绍

为大家介绍一个我编写的vue组件 auto-marquee ，他可以根据要展示文本是否超出展示区域，来判断是否使用跑马灯效果，效果图如下所示

假设要展示区域的宽度为500px，当要展示文本的长度小于500px时，只会展示文本；只有要展示文本的宽度超过500px时，才会进行跑马灯展示。

 项目地址

示例

点击查看 线上演示.

支持

vue2 vue3

霜月枫桥
关注
  • 14
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue跑马灯marquee组件（双端通用）
aring1998的博客
06-24 2751
目录 一、实现效果 二、实现过程 三、js版本源码 四、Vue组件源码 一、实现效果 二、实现过程 前言：最开始用间隔器方案制作了一个跑马灯，但是放在移动端中会出现严重的掉帧卡顿现象，于是整理思路后采用transition方案制作一个从右到左的动画处理问题 思路整理： 1.过渡是需要设定时间的，但是跑马灯中的文本可能是长短不一的 解决方案：根据文本的总宽度（即文本总长）设定过渡时间，假设文本宽度500px，我们将其除以...
vue实现文字跑马灯效果
12-04
使用 vue 绑定style属性实现文字跑马灯效果。。。。。。。
vue 文字跑马灯
weixin_44523517的博客
08-17 564
vue 文字跑马灯
VUE之文字跑马灯效果
weixin_30408309的博客
12-23 465
1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue-2.4.0.js"></script> &...
vue文字跑马灯
yaowrcsdn的博客
06-16 1470
vue文字跑马灯
vue中实现文字跑马灯
tq1711的博客
10-09 1189
{{ text }}
vue结合css实现的跑马灯组件
07-22
上下左右方向皆可跑，无抖动现象，性能好。
基于Vue的文字跑马灯组件(npm 组件包)
08-30
【Vue文字跑马灯组件创建详解】 在当前的前端开发领域，Vue.js 是一款非常流行的JavaScript框架，它简化了Web应用程序的构建。然而，对于一些特定的动态效果，如跑马灯，Vue社区通常会提供专门的组件来实现。本文将...
vue实现简单跑马灯效果
11-20
本文实例为大家分享了vue实现简单跑马灯效果的具体代码，供大家参考，具体内容如下 如下图片，会自行向 上“滚动” 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
Js和VUE实现跑马灯效果
10-15
Vue 实现跑马灯效果 在前端开发中，跑马灯（Carousel）是一种常见的动态展示内容的方式，通常用于滚动显示新闻、广告或者一系列项目。在 Js 和 Vue 中，我们可以使用不同的方法来实现这一效果。本篇文章将详细介绍...
vue实现文字横向无缝走马灯组件效果的实例代码
10-17
主要介绍了vue 文字横向无缝走马灯组件的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue实现跑马灯效果
10-15
主要为大家详细介绍了Vue实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue文字走马灯
欢欢的博客
05-04 673
<template> <div> <div class="text">{{msg}}</div> <input type="button" id="start" value="开始" @click="start"> <input type="button" id="end" value="结束" @click="end"> </div> </templat
vue2实现文字跑马灯效果
sinat_33255495的博客
07-04 1119
这里有一点要注意的是：v-html 的样式，直接写在外部样式可能不会生效。可以尝试使用穿透样式（::v-deep 或者 >>>）这种是通过截取字符串的方式实现滚动，如果文本中含有 html 标签的时候可能会出现标签展现在页面中的情况。
Vue-跑马灯-实现滚动文字(两种方式）及首尾相连形式的实现
weixin_56383764的博客
12-23 3644
vue实现跑马灯，实现滚动文字功能 -两种方式及动态获取字数宽度
vue文字跑马灯效果
王佳斌
07-26 5345
前言 效果： 当鼠标移入跑马灯文字时，跑马灯文字暂停滚动，反之鼠标移出继续滚动。 知识点： substring(字符串截取) setInterval定时器(解决字符串持续截取与头尾拼接) clearInterval清除定时器(解决悬停暂停) ES6箭头函数(解决this指向) 代码实现 HTML： <div id="app"> <span @mouseout="start"...
vue css3 文字首尾无缝跑马灯效果
最新发布
09-01
使用Vue结合CSS3可以实现文字首尾无缝跑马灯效果，具体步骤如下： 1. 在Vue组件中，首先需要引入所需的CSS样式，并在模板中创建一个容器元素，用于展示文字内容。 2. 在Vue的data属性中定义一个变量，用于存储要展示的文字内容。 3. 在Vue的created生命周期钩子函数中，使用定时器来不断修改文字内容，以实现跑马灯效果。 4. 在CSS样式中，为容器元素设置固定的宽度和高度，并设置overflow属性为hidden，以隐藏超出容器大小的文字。 5. 使用CSS3的动画特性来实现文字的平滑滚动效果。可以使用@keyframes关键字定义一个动画序列，通过改变文字内容的左边距来实现滚动效果。 6. 将定义的动画序列应用到容器元素上，设置动画的持续时间、循环次数等属性，以控制文字的滚动速度和效果。 通过以上步骤，就可以实现一个简单的Vue CSS3文字首尾无缝跑马灯效果。当页面加载后，文字内容会在容器中无缝地滚动显示，给用户一种跑马灯的视觉效果。同时，通过使用Vue的数据绑定功能，可以动态地改变文字内容，实现更丰富的交互效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值