php页头滚动文字公告,利用js实现动态文字滚动公告代码

特效描述：利用js实现 动态文字 滚动公告代码。利用js实现动态文字滚动公告代码

代码结构

1. 引入JS

2. HTML代码

最新战报

• {{item.name}}

  在

  {{item.city}}

  杀敌

  {{item.amount}}

  万

const vm = new Vue({

el: ".vueBox",

data: {

animate: false,

marqueeList: [

{

name: '1军',

city: '北京',

amount: '10'

},

{

name: '2军',

city: '上海',

amount: '20'

},

{

name: '3军',

city: '广州',

amount: '30'

},

{

name: '4军',

city: '重庆',

amount: '40'

}

]

},

created: function () {

setInterval(this.showMarquee, 2000)

},

methods: {

showMarquee: function () {

this.animate = true;

setTimeout(()=>{

this.marqueeList.push(this.marqueeList[0]);

this.marqueeList.shift();

this.animate = false;

},500)},

}

});