前言
用vue做无缝滚动，字体弹幕
就上代码吧
<head> <meta charset="UTF-8"> <style> div, ul, li, span, img { margin: 0; padding: 0; display: flex; box-sizing: border-box; } .marquee { width: 100%; height: 50px; align-items: center; color: #3A3A3A; background-color: #b3effe; display: flex; box-sizing: border-box; } .marquee_title { padding: 0 20px; height: 30px; font-size: 14px; border-right: 1px solid #d8d8d8; align-items: center; } .marquee_box { display: block; position: relative; width: 60%; height: 30px; overflow: hidden; } .marquee_list { display: block; position: absolute; top: 0; left: 0; } .marquee_top { transition: all 0.5s; margin-top: -30px } .marquee_list li { height: 30px; line-height: 30px; font-size: 14px; padding-left: 20px; } .marquee_list li span { padding: 0 2px; } .red { color: #FF0101; } </style> </head>
<body> <div class="vueBox"> <div class="marquee"> <div class="marquee_title"> <span>滚动</span></div> <div class="marquee_box"> <ul class="marquee_list" :class="{marquee_top:animate==true}"> <li v-for="(item, index) in latestGiftVoterList" :key="index">
<span>{{item.name}}</span> <span>在</span> <span class="red">{{item.city}}</span> <span>杀敌</span> <span class="red">{{item.amount}}</span> <span>万</span></li> </ul> </div> </div> </div> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript"> 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; //这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
},500)}, } }); </script> </body>