VUE跑马灯之文字无缝连接

一、前言

如上图所示，左边固定两个图标，右边固定一个图标，中间内容滚动，但是注意，一般的UI框架是提供滚动组件的，但是为什么要自己实现，主要是因为一般的UI组件不提供文字无缝连接,什么意思，假设滚动文字为：别人都知道我是一个超级无敌帅哥。一般的UI组件：等到无敌帅哥滚动玩，别人才会出现，所以就出现了一段空白，而我们的需求是，滚动到无敌帅哥之后，后面接上了别人都知道，无缝连接继续滚动，因为CSDN上传视频上传不了，就离谱，就简单描述了一下。

二、实现

notice.vue（滚动组件）

<template><div class="notice"><div class="notice-img"><img class="notice-img1" src="@/assets/image/notice1.png" /><img class="notice-img2" src="@/assets/image/notice2.png" /></div><div class="notice-wrap"><p>{{ notify }}</p><p class="notice-copy"></p></div><p class="notice-getWidth">{{ notify }}</p><div class="notice-img notice-image"><img class="notice-img3" src="@/assets/image/rightarrow_more.png" /></div></div>
</template>
<script>
export default {name: "Notice",props: ["notify"],data() {return{timer: null} },methods: {move() {let maxWidth = document.querySelector(".notice").clientWidth;let width = document.querySelector(".notice-getWidth").scrollWidth;if(width<maxWidth) returnlet scroll = document.querySelector(".notice-wrap");let copy = document.querySelector('.notice-copy');copy.innerText = this.notifylet distance = 0; // 位移距离this.timer = setInterval(() => {distance -= 1;if(-distance  >= width) {// 如果位移超过文字宽度，则回到起点distance = 14; // 与滚动字体保持一直就行}scroll.style.transform = `translateX(${distance}px)`},20)},},beforeDestroy() {debuggerif(this.timer) {clearInterval(this.timer)}},watch: {notify(newVal) {if (newVal) {const _this = thislet timer = setTimeout(() => {_this.move();clearTimeout(timer);}, 1000);}},},
};
</script>
<style lang="scss" scoped>
.notice {display: flex;overflow: hidden;position: relative;height: 108px;border-top: 14px solid #f0f0f0;border-bottom: 14px solid #f0f0f0;font-size: 14PX;.notice-img {display: flex;align-items: center;position: relative;z-index: 2;background: #fff;.notice-img1 {width: 30px;height: 32px;margin-left: 24px;margin-right: 16px;}.notice-img2 {width: 100px;height: 40px;margin-right: 12px;}.notice-img3 {width: 17px;height: 34px;}}.notice-image{width: 100px;justify-content: center;}.notice-wrap {display: flex;align-items: center;white-space: nowrap;word-break: keep-all;width: calc(100% - 241px);.notice-copy{margin-left: 32px;}}.notice-getWidth{word-break: break-all;white-space: nowrap;position: absolute;opacity: 0;top: 0;}
}
</style>

VUE跑马灯之文字无缝连接相关推荐

常见的跑马灯效果，无缝连接。mcake官网公告使用
无缝连接跑马灯哦...mcake官网公告使用演示 <!doctype html> <html lang="en"> <head><met ...
android 字体跑马灯,Android文字跑马灯功能的实现（自定义跑马灯控件）
文字跑马灯效果这个功能挺常见的,网上也有很多的介绍,大多是说使用普通的TextView加上几条属性即可实现.不过我在使用时发现并不能实现滚动,可能是因为我的页面中使用到的布局及控件比较复杂,被别的控件 ...
【iOS_GitHub】跑马灯/滚动文字条（类似于菜鸟/京东/支付宝/聚划算/网商银行等app的跑马灯功能）
Marquee(跑马灯) 说一下初衷吧,最初要用到跑马灯功能的时候,也找过一些SDK,但未能找到与我需求很好契合的SDK,主要就是手势滑动后的问题(手势滑动push/pop || 前后台切换等时候跑马 ...
Android 自定义跑马灯文字
Android 跑马灯效果文字: 效果图(真实动画很流畅,这个转gif有问题,感觉有点卡): . 代码: /*** Created by wuguangliang on 2018/12/21** 跑马 ...
Android 多种跑马灯的方法
转自http://jsf.iteye.com/blog/680257 http://www.devdiv.com/home.php?mod=space&uid=31865&do=blo ...
PHP怎么设置字体走马灯效果,html跑马灯/走马灯效果
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入"滚动的文字"语句,它的效果如下所示: 滚动的文字适当的运用标签的参数,可以表现 ...
html网页内容自动滚动实现跑马灯效果
1.效果1 超出div高度,文本自动滚动(像跑马灯一样从下往上滚动) 一个div里面有文字 1.如果文字没超出div高度:文字不用滚动 2.如果文字太多超出了div高度,那些文字就自动滚动 ps:滚动 ...
CSS实现公告栏文字跑马灯特效（VUE组件）
效果图 VUE组件封装 <template><div class="marquee" :style="{ backgroundColor: bgColo ...
【前端学习日记】利用Vue实现跑马灯的效果
一.效果按下roll按钮,文字进行滚动: 按下stop按钮,文字停止滚动: 二.重要代码 1.通过以下方式引入Vue  <s ...

VUE跑马灯之文字无缝连接

一、前言

二、实现

VUE跑马灯之文字无缝连接相关推荐

最新文章

热门文章