第一种方式
html
<!-- 滚动通知 -->
<div class="info">
<div class="text"> </div>
</div>
CSS
.info{
display: flex;
overflow: hidden;
text-overflow: ellipsis;
height:30px;
line-height: 30px;
padding-left: .5rem;
margin-bottom: 5px;
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #082e5d, #001531),linear-gradient(90deg, #3579CB, #011532);
font-size: calc(100vw * 12 / 1920);
width:100%;
color: #fff;
::v-deep span{
color: #7CB8FE;
font-weight: 600;
//padding:0 5px;
}
}
JS
move(zoumadeng){
const info = document.querySelector(".info"); // 容器元素
const textNode = document.querySelector(".info > .text"); // 文字元素
textNode.innerHTML= textNode.innerHTML + zoumadeng
// container.appendChild(textNode.cloneNode(true)); // 复制元素到后方
const textWidth = textNode.offsetWidth; // 获取文字元素宽度
let count = info.offsetWidth; // 初始化向左偏移为容器大小
const loop = () => {
if(count <= -textWidth) { // 如果文字偏移超出一个文字元素的宽度则复原
textNode.style["margin-left"] = 0;
count = info.offsetWidth
}
textNode.style["margin-left"] = `${count--}px`; // 继续向左移动
window.requestAnimationFrame(() => loop()); // 动画递归调用
}
window.requestAnimationFrame(() => loop()); // 启动动画
},
第二种方式
html
<div class="info">
<div v-html="text"></div>
</div>
CSS
.info{
height:30px;
line-height: 30px;
padding-left: .5rem;
margin-bottom: 5px;
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #082e5d, #001531),linear-gradient(90deg, #3579CB, #011532);
font-size: calc(100vw * 12 / 1920);
overflow: hidden;
width:100%;
color: #fff;
::v-deep span{
color: #7CB8FE;
font-weight: 600;
//padding:0 5px;
}
}
这里有一点要注意的是:v-html 的样式,直接写在外部样式可能不会生效。可以尝试使用穿透样式(::v-deep 或者 >>>)
JS
lang() {
//阻止lang再次执行
if (this.setInterval != null) return
// 使用substring截取字符串
this.setInterval = setInterval(() => {
//获取头一个 字符
let qian = this.text.substring(0, 7)
//获取后面的所有字符
let hou = this.text.substring(7)
//将获取到的字符拼接起来
this.text = hou + qian
// this.text = this.text
}, 800)
},
这种是通过截取字符串的方式实现滚动,如果文本中含有 html 标签的时候可能会出现标签展现在页面中的情况。