vue实现简单跑马灯效果_vue.js

vue实现简单跑马灯效果

本文实例为大家分享了vue实现简单跑马灯效果的具体代码，供大家参考，具体内容如下

如下图片，会自行向上“滚动”

代码：

<!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前端组件学习教程》学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。