前言

用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. 三十三：数据库之SQLAlchemy.filter常用的过滤条件

    准备数据 等于 不等于 like(区分大小写,模糊查询).ilike(不区分大小写) in not in(~,取反) 字段为空 不为空 and or

  2. Install the Flash plug-in

    Flash is a plug-in for your web browser that allows you to watch videos and use interactive web page ...

  3. Golang基础(8)：go interface接口

    一:接口概要 接口是一种重要的类型,他是一组确定的方法集合. 一个接口变量可以存储任何实现了接口方法的具体值.一个重要的例子就是io.Reader和io.Writer type Reader inte ...

  4. beego框架学习(二) -路由设置

    路由设置 什么是路由设置呢?前面介绍的 MVC 结构执行时,介绍过 beego 存在三种方式的路由:固定路由.正则路由.自动路由,接下来详细的讲解如何使用这三种路由. 基础路由 从beego1.2版本 ...

  5. elasticsearch索引大小写的问题

    今天用elasticsearch创建索引时碰到一个问题,用大写创建的索引,ES前端插件可以看到用大写创建索引存入的数据 程序启动,搜索的时候,却不显示数据,索引变成了小写,导致数据无法封装传入. 在h ...

  6. 原生js之addEventListener,removeEventListener

    使用addEventListener添加事件 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. PyQt5_主要的类库

    1.PyQt5包括的主要模块如下. QtCore模块——涵盖了包的核心的非GUI功能,此模块被用于处理程序中涉及的时间.文件.目录.数据类型.文本流.链接.QMimeData.线程或进程等对象. Qt ...

  8. python3 enum模块的应用

    python枚举模块的学习 ps:小编刚开始学习没多久,部分资源来源于其他网友,如有出错,麻烦联系修改哈,互帮互助,共同进步 一.枚举与字典类型 字典类型的缺点:1.值可变 2.没有防止相同标签的功能 ...

  9. requests实现文件下载, 期间显示文件信息&下载进度_python3

    requests实现文件下载, 期间显示文件信息&下载进度 """使用模块线程方式实现网络资源的下载 # 实现文件下载, 期间显示文件信息&下载进度 # ...

  10. Inversions After Shuffle CodeForces - 749E (概率,期望)

    大意: 给定一个$n$排列, 随机选一个区间, 求将区间随机重排后整个序列的逆序对期望. 考虑对区间$[l,r]$重排后逆序对的变化, 显然只有区间[l,r]内部会发生改变 而长为$k$的随机排列期望 ...