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>/*跑马灯*/.race-lamp-card{position: relative;height: 26px;background: #FFF1EB;border-radius: 4px;box-sizing: border-box;overflow: hidden;margin-top: 8px;li{height: 26px;font-size: 14px;font-weight: 400;color: #FF7A39;line-height: 26px;}.horseLamp_list {display: block;position: absolute;top: 0;left: 0;}.horseLamp_top {transition: all 0.2s;margin-top: -26px}}</style></head>
<body><div class="vueBox"><div class="race-lamp-card" v-if="texts.length>0"><ul class="horseLamp_list" :class="{horseLamp_top:animate}"><li v-for="(item, index) in texts" v-bind:key="index">{{item}}</li></ul></div>
</div><script type="text/javascript">const vm = new Vue ({el: ".vueBox",data: {animate: false,horseLampList: ["111111111","2222222","3333333333","44444444444444",]},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;}, 300);}}});
</script></body>
</html>

vue实现竖向跑马灯相关推荐

VUE之文字跑马灯效果
1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
前端：运用vue.js实现跑马灯效果
运行效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
黑马vue---10-11、Vue实现跑马灯效果
黑马vue---10-11.Vue实现跑马灯效果一.总结一句话总结: 1. 给 [浪起来] 按钮,绑定一个点击事件 v-on @ 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 ...
【前端学习日记】利用Vue实现跑马灯的效果
一.效果按下roll按钮,文字进行滚动: 按下stop按钮,文字停止滚动: 二.重要代码 1.通过以下方式引入Vue  <s ...
【Vue案例一】实现跑马灯效果
在Vue学习笔记(一)中我们已经学过了 v-on 这个指令,可以用来实现事件的绑定,本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果: 第一步:导入Vue包 <script ...
Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果前言最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
Vue.js 学习笔记四用一，二，三的知识做个跑马灯
做个简单的跑马灯效果页面定义2个按钮,绑定2个方法. <div id="divApp"><input type="button" value ...
vue基础小节 v-mode属性双向绑定跑马灯十秒挑战计算器 v-for和key属性 v-if与v-show用法区别 tap切换
vue代码基本结构 <div class="app"><div>{{mge}} ...
分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法感兴 ...

vue实现竖向跑马灯

vue实现竖向跑马灯相关推荐

最新文章

热门文章