您好,登錄后才能下訂單哦!
這篇文章主要講解了vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈的方法,內(nèi)容清晰明了,對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下,相信大家閱讀完之后會(huì)有幫助。
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈效果的具體代碼,供大家參考,具體內(nèi)容如下
如下圖片,會(huì)自行向 上“滾動(dòng)”
代碼:
<!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>
看完上述內(nèi)容,是不是對(duì)vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈的方法有進(jìn)一步的了解,如果還想學(xué)習(xí)更多內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。