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语句中的CDATA标签的意义
May 09 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
用js的document.write输出的广告无阻塞加载的方法
Jun 05 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
使用JavaScript实现贪吃蛇游戏
Sep 29 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
php利用cookie实现访问次数统计代码
2011/05/19 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python 文件操作实现代码
2009/10/07 Python
Python实现发送email的几种常用方法
2014/08/18 Python
python正则表达式中的括号匹配问题
2014/12/14 Python
深入浅析Python2.x和3.x版本的主要区别
2018/11/30 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
python 决策树算法的实现
2020/10/09 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
公益活动邀请函
2014/02/05 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
2014年审计工作总结
2014/11/17 职场文书
优秀班主任申报材料
2014/12/16 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015年科协工作总结
2015/05/19 职场文书
网吧员工管理制度
2015/08/05 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书