前言

用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. SAS中的聚类分析方法总结

    SAS中的聚类分析方法总结 说起聚类分析,相信很多人并不陌生.这篇原创博客我想简单说一下我所理解的聚类分析,欢迎各位高手不吝赐教和拍砖. 按照正常的思路,我大概会说如下几个问题: 1.     什么是 ...

  2. fcitx无法切换到中文(manjaro)

    安装fcitx后不能切换到中文输入法,在.bashrc或者.profile中添加以下代码: #fcitx export GTK_IM_MODULE=fcitx  export QT_IM_MODULE ...

  3. python3.5以后venv创建/激活/退出虚拟环境

    1.创建虚拟环境 $ python3 -m venv <环境名称> 2.激活虚拟环境 $ source <环境名称>/bin/activate 3.关闭虚拟环境 $ deact ...

  4. java：（json，ajax，path，Oracle的分页实例，Filter拦截器）

    1.json: <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...

  5. BeautifulSoup解析豆瓣即将上映的电影信息

    工欲善其事,必先利其器,我们首先得了解beautifulsoup的使用,这其实是一个比较简单的东西   BeautifulSoup的基本使用语法规则 .find() 使用示例 soup.find('a ...

  6. 《Google工作法》读书笔记

    最近一段时间,拜读了<Google工作法>,工作效率提升10倍的57个技巧. 作者是彼得·费利克斯·格日瓦奇,波兰人. 其中印象最深刻的部分如下: (1)不要被邮件夺走时间 不用邮件,所有 ...

  7. SpringBoot 和 SpringCloud 之间关系？

    SpringBoot:专注于快速方便的开发单个个体微服务(关注微观):SpringCloud:关注全局的微服务协调治理框架,将SpringBoot开发的一个个单体微服务组合并管理起来(关注宏观):Sp ...

  8. HCL 试验1

    PC端配置:配置ip地址 交换机配置:①创建VLAN system-view vlan 10 vlan 20 ②配置PC端接口 interface gi 1/0/1 port link-type ac ...

  9. Linux环境下Oracle安装参数设置

    前面讲了虚拟机的设置和OracleLinux的安装,接下来我们来说下Oracle安装前的准备工作.1.系统信息查看系统信息查看首先服务器ip:192.168.8.120服务器系统:Oracle Lin ...

  10. Spring Security框架进阶、自定义登录

      1.Spring Security框架进阶 1.1 Spring Security简介 Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安 ...