技术栈

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

霜月枫桥2024-07-02 16:24

介绍

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

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

项目地址

  • github

示例

点击查看 线上演示.

支持

vue2 vue3

上一篇:【计算机毕业设计】048微信小程序电影订票系统
下一篇:易用且免费的在线3D交互编辑器?
相关推荐
华科易迅
4 分钟前
Vue如何集成封装Axios
前端·javascript·vue.js
康一夏
5 分钟前
Next.js 13变化有多大?
前端·react·nextjs
糖炒栗子0326
6 分钟前
前端项目标准环境搭建与启动
前端
不是az
6 分钟前
CSS知识点记录
前端·javascript·css
爱分享的阿Q
15 分钟前
GPT6-Spud-AGI前夜的豪赌
前端·easyui·agi
昵称暂无1
43 分钟前
.NET 高级开发 | i18n 原理、实现一个 i18n 框架
javascript·c#·.net
西西小飞龙
1 小时前
Less/Sass Mixins vs. Extend
前端·less·sass
syjy2
1 小时前
(含下载)BeTheme WordPress主题使用教程
前端·wordpress·wordpress建站
Misnice
1 小时前
shadcn如何使用
前端·reactjs
h_jQuery
1 小时前
vue使用gm-crypto对数据进行sm4加密处理
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02一周AI热点速览(2026.03.31-04.06):GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决?3 种方案实测,附完整排查流程04AI 编程效率翻倍:Superpowers Skills 上手清单 + 完整指南05MySQL表约束详解:8大核心约束实战指南06Oh My Codex 快速使用指南07CodeBuddy与WorkBuddy深度对比:腾讯两款AI工具差异及实操指南08VMware Workstation Pro 17 虚拟机完整安装教程(2026最新)09实测!Gemma 4 成功跑在安卓手机上:离线 AI 助手终于来了10UV安装并设置国内源