前言

用vue做无缝滚动，字体弹幕

就上代码吧

<head>

<meta charset="UTF-8">

<style>

div, ul, li, span, img {

    margin: 0;

    padding: 0;

    display: flex;

    box-sizing: border-box;

}

.marquee {

    width: 100%;

    height: 50px;

    align-items: center;

    color: #3A3A3A;

    background-color: #b3effe;

    display: flex;

    box-sizing: border-box;

}

.marquee_title {

    padding: 0 20px;

    height: 30px;

    font-size: 14px;

    border-right: 1px solid #d8d8d8;

    align-items: center;

}

.marquee_box {

    display: block;

    position: relative;

    width: 60%;

    height: 30px;

    overflow: hidden;

}

.marquee_list {

    display: block;

    position: absolute;

    top: 0;

    left: 0;

}

.marquee_top {

    transition: all 0.5s;

    margin-top: -30px

}

.marquee_list li {

    height: 30px;

    line-height: 30px;

    font-size: 14px;

    padding-left: 20px;

}

.marquee_list li span {

    padding: 0 2px;

}

.red {

    color: #FF0101;

}

</style>

</head>
<body>

<div class="vueBox">

<div class="marquee">

<div class="marquee_title">

<span>滚动</span></div> <div class="marquee_box">

<ul class="marquee_list" :class="{marquee_top:animate==true}">

<li  v-for="(item, index) in latestGiftVoterList" :key="index">
<span>{{item.name}}</span> <span>在</span> <span class="red">{{item.city}}</span> <span>杀敌</span> <span class="red">{{item.amount}}</span> <span>万</span></li>

</ul>

</div>

</div>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

    const vm = new Vue({

        el: ".vueBox",

        data: {

            animate: false,

            marqueeList: [

                {

                    name: '1军',

                    city: '北京',

                    amount: '10'

                },

                {

                    name: '2军',

                    city: '上海',

                    amount: '20'

                },

                {

                    name: '3军',

                    city: '广州',

                    amount: '30'

                },

                {

                    name: '4军',

                    city: '重庆',

                    amount: '40'

                }

            ]

        },

        created: function () {

            setInterval(this.showMarquee, 2000)

        },

        methods: {

            showMarquee: function () {

                this.animate = true;

                setTimeout(()=>{

                    this.marqueeList.push(this.marqueeList[0]);

                this.marqueeList.shift();

                this.animate = false; //这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
            },500)},

        }

    });

</script>

</body>

vue 无缝滚动文字的更多相关文章

  1. vue无缝滚动的插件开发填坑分享

    写插件的初衷 1.项目经常需要无缝滚动效果,当时写jq的时候用用msClass这个老插件,相对不上很好用. 2.后来转向vue在vue-awesome没有找到好的无缝滚动插件,除了配置swiper可以 ...

  2. vue 上实现无缝滚动播放文字系统公告

    首先实现效果,当时的需求做的系统公告框设定一个宽度,超宽滚动播放,没超宽则静态展示,有了需求,想了下实现原理,最开始打算js更改字体内容的方式,但是想了下感觉会有点麻烦,想起之前做了表格的左侧边固定, ...

  3. angular实现的文字上下无缝滚动

    最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...

  4. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  5. vue插件 vue-seamless-scroll 无缝滚动插件ES6使用总结

    最近因为需求需要写一个项目信息无缝向上滚动组件,在网上搜了一下,看到大家的一致好评就果断的使用了vue-seamless-scroll组件.下面就简单的介绍它的使用,具体详细的使用推荐大家去看下开发者 ...

  6. JS实现文字图片无缝滚动

    今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...

  7. 基于vue的无缝滚动组件

    vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...

  8. Vue 消息无缝滚动

    vue实现消息向上无缝滚动效果 <ul class="new-list" :class="{anim:animate}" @mouseenter=&quo ...

  9. vue实现无缝滚动

    vue实现无缝滚动 标签部分 <div style="height: 260px; width: 50%;display: inline-block;float: right; ove ...

随机推荐

  1. samba安装应用实例-1

    应用实例:先安装samba软件,yum install -y samba1.需求:共享一个目录,任何人都可以访问,不用输密码,只读.(1)首先打开samba配置文件/etc/samba/smb.con ...

  2. 阶段3 2.Spring_01.Spring框架简介_01.spring课程四天安排

    spring共四天 第一天:spring框架的概述以及spring中基于XML的IOC配置 第二天:spring中基于注解的IOC和ioc的案例 第三天:spring中的aop和基于XML以及注解的A ...

  3. properties文件的加载方式

    下面1-4的内容是网上收集的相关知识,总结来说,就是如下几个知识点: 最常用读取properties文件的方法 InputStream in = getClass().getResourceAsStr ...

  4. node递归批量重命名指定文件夹下的文件

    1.用法:将js内容拷到一文件中,命名为batchRename.js:  该文件可以放到任何你想更改文件名的文件夹目录,然后dos(或 linux 终端)进入该文件夹,然后执行node batchRe ...

  5. Ubuntu虚拟机共享文件夹的1234

    第一 在虚拟机内添加路径 进入虚拟机软件,点开工具栏上方虚拟机,点击设置,选择选项,查看共享文件夹,点击添加,下一步 第二: 第三 点击启用此共享 点击完成 第四 查看共享的文件 在mnt里可以看到S ...

  6. CPU 使用率低 but负载高

    一.关于负载 什么是负载:负载就是cpu在一段时间内正在处理以及等待cpu处理的进程数之和的统计信息,也就是cpu使用队列的长度统计信息,这个数字越小越好(如果超过CPU核心*0.7就是不正常) 负载 ...

  7. [JavaScript] console.log只在查看时才会读取这个打印的对象，并把此刻相关属性和值显示出来

      /** * 写个函数解决console.log只在查看时才会读取这个打印的对象,并把此刻相关属性和值显示出来 * @param arg */ const log = function (...ar ...

  8. mysql 关键字大全

    mysql无论表名,还是字段名都应该避开mysql关键字. 如字段使用关键字,sql查询需加上` `.   查询插件,当使用关键字,会报错. usage

  9. python 并发编程 多线程 目录

    线程理论 python 并发编程 多线程 开启线程的两种方式 python 并发编程 多线程与多进程的区别 python 并发编程 多线程 Thread对象的其他属性或方法 python 并发编程 多 ...

  10. LPVOID 指针 转 int

    1 DWORD  WINAPI  SockUDP::RecvThread(LPVOID lparam){   //套接字  正确:int sock= *(int*)(lparam);   错误:int ...