vue實現(xiàn)簡單跑馬燈效果
更新時間：2022年05月18日 16:23:30 作者：LPLIFE
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單跑馬燈效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(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>更多文章可以點擊《Vue.js前端組件學(xué)習(xí)教程》學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進行學(xué)習(xí)。
更多vue學(xué)習(xí)教程請閱讀專題《vue實戰(zhàn)教程》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue通過elementUI組件實現(xiàn)圖片預(yù)覽效果
我們在開發(fā)中經(jīng)常會遇到通過點擊某個按鈕或者文字實現(xiàn)圖片的預(yù)覽功能,這里我們分別介紹vue2和vue3里面如何實現(xiàn)圖片預(yù)覽方法,需要的朋友可以參考下2023-09-09
Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化
這篇文章主要為大家詳細介紹了Vue引入highCharts實現(xiàn)數(shù)據(jù)可視化，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue vant Area組件使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家介紹了Vite多環(huán)境配置項目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
Axios?是一個基于?promise?的網(wǎng)絡(luò)請求庫，可以用于瀏覽器和?node.js，是一個第三方插件，第三方異步請求工具庫，這篇文章主要介紹了Axios在vue項目中的封裝方法,需要的朋友可以參考下2022-10-10
教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏
這篇文章主要為大家介紹了使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家詳細介紹了Vue彈窗組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
系統(tǒng)頂部展示一個橫向滾動的消息通知,就是消息內(nèi)容從右往左一直滾動,這篇文章主要介紹了vue頂部消息橫向滾動通知,需要的朋友可以參考下2024-02-02
這篇文章主要為大家介紹了Vue.js Class與Style綁定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
Vue3實現(xiàn)Element Plus表格的多選功能與條件操作
Element-plus是ElementUI的升級版,是一套基于vue2與vue3的桌面端組件庫,它提供了豐富的組件幫助開發(fā)人員快速構(gòu)建功能強大、風(fēng)格統(tǒng)一的頁面,本文給大家介紹了Vue3實現(xiàn)Element Plus表格的多選功能與條件操作,需要的朋友可以參考下2024-08-08