前言

用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. Linux下面配置安装jmeter（1）

    一.下载安装JDK Jmeter依赖jdk环境,我们先准备jdk,查看是否安装jdk: # rpm -qa | grep jdk    或者    #Java –version 我本地已准备好了jdk ...

  2. 自己实现一个list比较器 实现Comparator()接口

    一:一个实体类 成员变量有名字,年龄,分数 )))))); List<User> list = new ArrayList<>(); list.add(user1); list ...

  3. bi的tableau

    参考: 官网: https://help.tableau.com/current/server-linux/zh-cn/get_started_server.htm 可视化分析最佳做法: 实用指南 h ...

  4. 【转帖】如何看待 HTTP/3 ？

    如何看待 HTTP/3 ? https://mp.weixin.qq.com/s/fC10Cyj6xjjwOCnqxX-Dvg 车小胖的公众号 转帖学习一下. 原创: 车小胖谈网络 车小胖谈网络 20 ...

  5. Java Content Repository API 简介 转自(https://www.ibm.com/developerworks/cn/java/j-jcr/)

    Java Content Repository API 简介 1 如果曾经试过开发内容管理应用程序,那么您应当非常清楚在实现内容系统时所遇到的固有难题.这个领地有点支离破碎,许多供应商都有自己的私有仓 ...

  6. noip2015day2-运输计划

    题目描述 公元$ 2044 $年,人类进入了宇宙纪元. \(L\) 国有 \(n\) 个星球,还有 \(n-1\) 条双向航道,每条航道建立在两个星球之间,这 \(n-1\) 条航道连通了 \(L\) ...

  7. [LeetCode]220. 存在重复元素 III

    题目链接:https://leetcode-cn.com/problems/contains-duplicate-iii/ 题目描述: 给定一个整数数组,判断数组中是否有两个不同的索引 i 和 j,使 ...

  8. luoguP4578_ [FJOI2018]所罗门王的宝藏

    题意 一个n*m的矩阵,初始值全为0,每一行每一列操作一次可以加1或者减1,问能否操作得到给定矩阵. 分析 行和列的分别的加减是可以相互抵消的,因此我们只需要考虑行的加和列的减. 对于给定矩阵每一个数 ...

  9. RateLimit--使用guava来做接口限流

    转:https://blog.csdn.net/jiesa/article/details/50412027 一.问题描述   某天A君突然发现自己的接口请求量突然涨到之前的10倍,没多久该接口几乎不 ...

  10. k路归并

    public static int[] k_merge(ArrayList<int[]> k_array) { if(CollectionUtils.isEmpty(k_array)){ ...