mumuzi1998 2020-04-19 15:37 采纳率: 100%
浏览 177
已采纳

第一次来csdn求助,劳烦大佬帮忙看看如何修改这个滚动字幕的速度

各位大佬,好久之前在csdn看到滚动公告的代码,当时复制下来了,今天突然想起来,想用上,但是不知道如何调速度,劳烦各位大佬帮忙看看,谢谢你们!

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

        #marquee_text {
            position: absolute;
            top: 0;
            left: 100%;
            line-height: 30px;
            display: block;
            word-break: keep-all;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<div id="marquee">
    <span id="marquee_text">这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕这是滚动字幕</span>
</div>
<script type="text/javascript">
    marquee("marquee", "marquee_text");
    function marquee(p, s) {
        var scrollWidth = document.getElementById(p).offsetWidth;
        var textWidth = document.getElementById(s).offsetWidth;
        var i = scrollWidth;
        console.log(scrollWidth, textWidth);
        function change() {
            i--;
            if (i < -textWidth) {
                i = scrollWidth;
            }
            document.getElementById(s).style.left = i + "px";
            window.requestAnimationFrame(change);
        }
        window.requestAnimationFrame(change);
    }
</script>
</html>

代码的原作者我找不到了,非常抱歉~

  • 写回答

1条回答 默认 最新

  • 关注

    function change() {
    i = i-15;//(这里改速率)
    if (i < -textWidth) {
    i = scrollWidth;
    }
    document.getElementById(s).style.left = i + "px";
    window.requestAnimationFrame(change);
    }

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)