前言

用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. 113路径总和II

    题目: 给定一个二叉树和一个目标和,找到所有从根节点到叶子节点路径总和等于给定目标和的路径. 来源: https://leetcode-cn.com/problems/path-sum-ii/ 法一: ...

  2. spring cloud依赖服务调用优化

    1.请求缓存 优点: 注解方式实现: 设置缓存key: 如果可以确认,对要缓存的数据的操作,主要是写操作都只在feign调用中完成且读多写少,则可以使用此方式:如果在其他地方还有对数据的写操作,则可能 ...

  3. cocos2dx基础篇(28) 布景层Layer的三个子类

    [3.x]     (1)去掉 "CC" [CCLayerColor] 颜色布景层CCLayerColor有两个父类:CCLayerRGBA.CCBlendProtocol.相信有 ...

  4. API管理

    原理 在SpringMVC中RequestMappingHandlerMapping是比较重要的一个角色,它决定了每个URL分发至哪个Controller. Spring Boot加载过程如下,所以我 ...

  5. python基础--面向对象之封装

    # 在python中用双下划线,开头的方式将属性隐藏起来(设置成私有的) # 但其实这只是一种变形操作,而且仅仅在类定义阶段会发生变形 # 类中所有双下划线开头的如__x都会在类定义的时候自动形成:_ ...

  6. Dubbo-zooKeeper入门讲解

    1.Dubbo-zooKeeper史上最简单入门实例 2.Dubbo官方文档

  7. CF 11D A Simple Task 题解

    题面 这道题的数据范围一看就是dfs或状压啦~ 本文以状压的方式来讲解 f[i][j]表示目前的节点是i,已经经历过的节点的状态为j的简单环的个数: 具体的转移方程和细节请看代码: PS:(i& ...

  8. jmeter---linux安装运行

    安装jdk 安装jmeter 配置环境变量: export JAVA_HOME=/usr/java/1.8.0_181 export CLASSPATH=.:JAVA_HOME/lib/dt.jar: ...

  9. pythonWeb框架创建app模块以及虚拟环境管理工具

    在进行项目搭建的时候,如果有多个功能模块,以及多个网页地址时,为了系统的可维护性,以及易读性,我们大多数情况下选择模块化开发 所以我们就要使用app指令来创建不同的功能模块 首先项目框架如下: 接下来 ...

  10. CSP-S全国模拟赛第四场 【nan？】

    本来想抢三题的 rk1 ?[无耻 最后发现 T2 好像还是慢了些,只搞了个 rk2 子段与子段 第一题随便分析一下,发现一段区间中某个元素的贡献次数就是 \((x+1)·(y+1)\) x 是他左边的 ...