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

需求描述

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

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

解决方案

垂直方向滚动

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

<!DOCTYPE html>
<html>
<head><title>单行文字垂直跑马灯效果</title><style type="text/css">ul,li{list-style:none;display:block;margin: 0;padding: 0;}#loop-show-box {width: 300px;height: 25px;line-height: 25px;background: red;position: absolute;top: 0;left: 0;right: 0;overflow: hidden;}.li-style {width: 100%;height: 25px;text-align: center;}</style>
</head>
<body>
<div id="loop-show-box"><ul id="con1"><li class="li-style">测试1号</li><li class="li-style">测试2号</li><li class="li-style">测试3号</li><li class="li-style">测试4号</li></ul><ul id="con2"></ul>
</div>
<script type="text/javascript">var area = document.getElementById('loop-show-box');var con1 = document.getElementById('con1');var con2 = document.getElementById('con2');var mytimer1 = null;var mytimer = null;var time = 1000 / 60;con2.innerHTML = con1.innerHTML;function scrollUp () {if (area.scrollTop >= con1.offsetHeight) {area.scrollTop = 0;} else {if (area.scrollTop % 25 == 0) {clearInterval(mytimer);clearInterval(mytimer1);mytimer1 = setTimeout(function () {mytimer = setInterval(scrollUp, time);}, 1000);}area.scrollTop++;}}mytimer = setInterval(scrollUp, time);
</script>
</body>
</html>

水平方向滚动

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

<!DOCTYPE html>
<html>
<head><title>单行文字水平跑马灯效果</title><style type="text/css">*{margin: 0;padding: 0;}.container {width: 400px;height: 25px;display: flex;flex-direction: row;justify-content: center;align-items: center;margin: 100px auto;}.icon {width: 15px;margin-right: 15px;}#loop-show-box {width: 300px;height: 25px;line-height: 25px;background: red;overflow: auto;white-space: nowrap;}.li-style {width: 300px;height: 25px;text-align: left;/*使用inline-block的时候两个item之间会存在间距（当然了你可以把它们写在一行以去除这样的间距*/display: inline-flex;}#con1,#con2 {display: inline-flex;}</style>
</head>
<body>
<div class="container"><img src="img/horn.png" class="icon"><div id="loop-show-box"><div id="con1"><div class="li-style">测试1号</div><div class="li-style">测试2号</div><div class="li-style">测试3号</div><div class="li-style">测试4号</div><div class="li-style">测试5号</div><div class="li-style">测试6号</div></div><div id="con2"></div></div>
</div>
<script type="text/javascript">var area = document.getElementById('loop-show-box');var con1 = document.getElementById('con1');var con2 = document.getElementById('con2');var mytimer1 = null;var mytimer = null;var time = 1000 / 60;con2.innerHTML = con1.innerHTML;function scrollUp () {if (area.scrollLeft >= con1.offsetWidth) {area.scrollLeft = 0;} else {// 可根据想要的速度调节步长area.scrollLeft += 2;if (area.scrollLeft % 300 == 0) {clearInterval(mytimer);clearInterval(mytimer1);mytimer1 = setTimeout(function () {mytimer = setInterval(scrollUp, time);}, 1000);}}}mytimer1 = setTimeout(function () {mytimer = setInterval(scrollUp, time);}, 1000)
</script>
</body>
</html>

单行文字垂直/水平跑马灯效果相关推荐

CSS+JavaScript制作文字的LED跑马灯效果
以下是html代码: <head><meta charset="utf-8" /><title>文字跑马灯</title><l ...
TextView的跑马灯效果实现
TextView的跑马灯效果实现问题描述当文字内容过长,但是只允许显示一行时,可以将文字显示为跑马灯效果,即文字滚动显示. 代码实现第一种方法实现先查询TextView控件的属性,得到以下信息 ...
android上垂直跑马灯,android textview 垂直滚动and水平跑马灯
垂直滚动的话就挺简单的.当然了不是自动的垂直滚动.如果是自动的垂直滚动的话还需要自定义.所以如果有需求需要textview 可以垂直滚动的话,那你来这里就对了. 直接贴代码.就是这么任性. andr ...
Android 使用 ellipsize 实现文字横向移动效果(跑马灯效果)
实现的效果图如下 ellipsize 可以设置跑马灯效果具体代码设置如下 <TextViewandroid:layout_width="match_parent"andro ...
c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
Android 自定义View实现文本水平方向的跑马灯效果
自定义View实现文本水平方向的跑马灯效果,可以设置文本相关属性及滚动速度,以及滚动方式 /*** Created by wyl on 2018/10/10.*/ public class Marqu ...
跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
微信小程序教程：文字跑马灯效果
当你的微信小程序内容中出现文字跑马灯效果,会不会觉得很拉风,接下来大家详细讲解下如何操作实现这效果. 效果: wxml <view>1 显示完后再显示</view> <v ...
Android TextView跑马灯效果与设置文字阴影
TextView跑马灯效果的实现自定义一个TextView public class MusicDesText extends TextView {public MusicDesText(Cont ...