vue滾動公告效果
阿新 • • 發佈：2018-11-06
轉自站長素材
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue.js動態文字滾動公告程式碼 - 站長素材</title> <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}"> <li v-for="(item, index) in marqueeList"> <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 src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.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; },500)}, } }); </script> </div> </body> </html>