原生JS实现marquee 滚动字幕效果，完美解决频闪问题

WiTung

于 2019-01-21 09:57:34 发布

阅读量6.7k

点赞数 6

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34797972/article/details/86569316

marquee标签在HTML5 中已经不再受支持

但是我们很多时候会用到滚动字幕的样式，所以就采用了实时动态改变元素位置的方式来实现此功能，在实现的时候用过HTML DOM setInterval() 方法，但是会出现频闪的现象，初步估计是因为其他js的时间对其产生影响，后来改用了window.requestAnimationFrame()方法完美解决问题。

关于window.requestAnimationFrame()方法的详解请看下面地址。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滚动字幕</title>
    <style>
        #marquee {
            color: red;
            display: block;
            width: 96%;
            height: 30px;
            margin: 0 auto;
            position: relati