vue實(shí)現(xiàn)簡單跑馬燈效果
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡單跑馬燈效果的具體代碼,供大家參考,具體內(nèi)容如下
如下圖片,會自行向上“滾動”
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑馬燈 </title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script> <style> div, ul, li, img { margin: 0; padding: 0; box-sizing: border-box; display: flex; } .horseLamp { width: 100%; height: 50px; align-items: center; background-color: #ddd; display: flex; box-sizing: border-box; } .horseLamp_box { display: block; position: relative; width: 60%; height: 30px; overflow: hidden; } .horseLamp_list { display: block; position: absolute; top: 0; left: 0; } .horseLamp_top { transition: all 0.2s; margin-top: -30px } .horseLamp_list li { height: 30px; line-height: 30px; font-size: 14px; } </style> </head> <body> <div class="vueBox"> <div class="horseLamp"> <div class="horseLamp_box"> <ul class="horseLamp_list" :class="{horseLamp_top:animate}"> <li v-for="(item, index) in horseLampList"> <img :src="item.img"> </li> </ul> </div> </div> </div> <script type="text/javascript"> const vm = new Vue ({ el: ".vueBox", data: { animate: false, horseLampList: [ { img:'../assets/logo.png' }, { img:'../assets/logo.png' }, { img:'../assets/logo.png' }, { img:'../assets/logo.png' } ] }, created: function () { setInterval (this.showhorseLamp, 600) }, methods: { showhorseLamp: function () { this.animate = true; setTimeout (() => { this.horseLampList.push (this.horseLampList[ 0 ]); this.horseLampList.shift (); this.animate = false; }, 2000); } } }); </script> </body> </html>
更多文章可以點(diǎn)擊《Vue.js前端組件學(xué)習(xí)教程》學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章

vue使用Highcharts實(shí)現(xiàn)不同高度的3D環(huán)形圖

Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解

element-ui?table表格底部合計(jì)自定義配置過程

Vue Element前端應(yīng)用開發(fā)之獲取后端數(shù)據(jù)

vue?router進(jìn)行路由跳轉(zhuǎn)并攜帶參數(shù)的實(shí)例詳解(params/query)

基于vue寫一個全局Message組件的實(shí)現(xiàn)

vue使用keep-alive如何實(shí)現(xiàn)多頁簽并支持強(qiáng)制刷新