这篇文章主要介绍了vue 文字横向无缝走马灯组件的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
marquee标签已经废弃了，只能手动实现文字走马灯样式
基于vue组件开发
<div class="wrap"> // 外框，固定宽度 <div id="box"> // 内部滚动框 <div id="marquee">{{text}}</div> //展示的文字 <div id="copy"></div> // 文字副本，为了实现无缝滚动 </div><div id="node">{{text}}</div> //为了获取text实际宽度 </div> // 限制外框宽度，隐藏多余的部分 .wrap { overflow: hidden; } // 移动框宽度设置 #box { width: 80000%; } // 文字一行显示 #box div { float: left; } // 设置前后间隔 #marquee { margin: 0 <mark style="color:transparent">来4源gaodaimacom搞#代%码*网</mark>16px 0 0; } // 获取宽度的节点，隐藏掉 #node { position: absolute; z-index: -999; top: -999999px; }
父组件引入 import myMarquee from './my-marquee
使用并传参：
参数：
data (){ return { lists: [ '连雨不知春去', '一晴方觉夏深' ] } }
总结
以上所述是小编给大家介绍的vue实现文字横向无缝走马灯组件效果的实例代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
以上就是vue实现文字横向无缝走马灯组件效果的实例代码的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现文字横向无缝走马灯组件效果的实例代码
转载请注明原文链接：vue实现文字横向无缝走马灯组件效果的实例代码
