vue实现简单跑马灯效果


Posted in Javascript onMay 25, 2020

本文实例为大家分享了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实战教程》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 Javascript
Js和VUE实现跑马灯效果
May 25 #Javascript
Vue实现简单的跑马灯
May 25 #Javascript
Vue实现跑马灯效果
May 25 #Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 #Javascript
ES2020 已定稿,真实场景案例分析
May 25 #Javascript
Javascript原型链及instanceof原理详解
May 25 #Javascript
Node登录权限验证token验证实现的方法示例
May 25 #Javascript
You might like
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
Jquery+JSon 无刷新分页实现代码
2010/04/01 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
简单分析javascript面向对象与原型
2015/05/21 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
python k-近邻算法实例分享
2014/06/11 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
用python实现的线程池实例代码
2018/01/06 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
求职者简历中的自我评价
2013/10/20 职场文书
家长评语和期望
2014/02/10 职场文书
主管会计岗位责任制
2014/02/10 职场文书
环保建议书400字
2014/05/14 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
Python实现单例模式的5种方法
2021/06/15 Python
python基础之模块的导入
2021/10/24 Python
python小型的音频操作库mp3Play
2022/04/24 Python