vue實現(xiàn)簡單跑馬燈的方法

這篇文章主要講解了vue實現(xiàn)簡單跑馬燈的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的葫蘆島網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！

本文實例為大家分享了vue實現(xiàn)簡單跑馬燈效果的具體代碼，供大家參考，具體內容如下

如下圖片，會自行向 上“滾動”

vue實現(xiàn)簡單跑馬燈的方法

代碼：

<!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實現(xiàn)簡單跑馬燈的方法有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當前標題：vue實現(xiàn)簡單跑馬燈的方法
標題路徑：http://muchs.cn/article4/johooe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、App設計、微信小程序、網(wǎng)站設計公司、網(wǎng)站排名、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網(wǎng)站制作