vue实现简单跑马灯的方法

这篇文章主要讲解了vue实现简单跑马灯的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站建设、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的葫芦岛网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

本文实例为大家分享了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实现简单跑马灯的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。

当前标题:vue实现简单跑马灯的方法
标题路径:https://www.cdcxhl.com/article4/johooe.html

成都网站建设公司_创新互联,为您提供微信公众号App设计微信小程序网站设计公司网站排名定制网站

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

外贸网站制作