单行文字垂直/水平跑马灯效果

muzhuyu 发布于2019-08-26 12:01 / 2524人阅读

摘要：需求描述接到的需求是这样的跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出。

需求描述

接到的需求是这样的：跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出。
静态效果如下图，文字从下往上或者从右往左滚动，滚动到此位置时停留一秒（不会传动图...

网络上有比较多的多行文字循环滚动的demo,找了一下好像能满足单行并且可停留一秒的比较少（emmm可能我没认真找
下面贴出我的最终解决方案。

解决方案 垂直方向滚动

使用一个定时器不断改变最外层div的scrollTop，为了能循环滚动，增加一个与con1一样的con2
PS：这里的time选用1000/60是因为想要模拟window.requestAnimationFrame(一般1000ms60帧，当然了，你也可以直接使用requestAnimationFrame代替setInterval，效果更好




    单行文字垂直跑马灯效果
    



  
    测试1号
    测试2号
    测试3号
    测试4号

水平方向滚动

水平方法滚动的具体实现其实跟垂直方向类似的，不同的是要改变的是容器的scrollLeft




  单行文字水平跑马灯效果
  



  
  
    
      测试1号
      测试2号
      测试3号
      测试4号
      测试5号
      测试6号

云服务器 GPU云服务器水平垂直居中 js跑马灯效果文字垂直滚动文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108030.html

2019，帮助你更好的开发小程序

摘要：前言原生开发小程序有了两个项目，在原生开发小程序经验技巧方面有一些自己的总结，此篇文章做原创分享本文适合老手查看，新手请参阅官方文档，同步至。前言原生开发小程序有了两个项目，在原生开发小程序经验技巧方面有一些自己的总结，此篇文章做原创分享！本文适合老手查看，新手请参阅官方文档，同步至github。 1.发布订阅处理复杂逻辑支持先订阅后发布，以及先发布后订阅方法源码 var E...

DevTalking 2019-08-23 16:14 评论0 收藏0
Android控件之TextView全解析

摘要：设置控件中内容的位置，如上表示居中。为文本指定输入法，需要完全限定名完整的包名。在指定的情况下，设置重复滚动的次数，当设置为时表示无限次。限制显示的文本长度，超出部分不显示。前言大家好！在前几篇文章里，我们详细介绍了Android中的常用布局，使大家对Android中的页面布局有了一定认识，而对于布局中使用的一些UI控件如Button、TextView等，有的读者可能还存在一些困惑...

jsdt 2019-08-19 10:32 评论0 收藏0
CSS实现垂直居中的4种思路

摘要：测试文字若子元素定高，结合绝对定位的盒模型属性，实现居中效果测试文字关于增加层级的说明在水平居中对齐中，元素外层套一层并设置，元素设置负或者的负属性，可以实现水平居中的效果。行高line-height实现单行文本垂直居中以前一直认为单行文本垂直居中要将高度和行高设置成相同的值，但高度其实没必要设置。实际上，文本本身就在一行中居中显示。在不设置高度的情况下，行高撑开高度。 .tes...

Pikachu 2019-08-29 13:25 评论0 收藏0
css table布局大法，解决你大部分居中、多列等高、左右布局的问题

摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中不定高水平垂直居中单行定高水平垂直居中单行不定高水平垂直居中多行定高水平垂直居中多行不定高水平垂直居中多列等高布局左边定宽右边自适应布局左边右边定宽中间自适应三列布局最...

lijinke666 2019-08-29 11:22 评论0 收藏0