朋友所在工厂配备有一处大屏，大屏旁设有一台触摸屏电脑，该电脑日常主要用于投放系统大屏看板。今日，工厂领导有投放滚动字幕的需求，要求他寻找一款滚动字幕软件。朋友随即在网络上展开各种搜索。然而搜索到的软件，要么下载链接已失效，要么费尽周折下载下来的压缩包被系统提示存在病毒风险。朋友多次尝试后，仍未成功获取可用软件，无奈之下向我寻求协助。我说何必呢，直接用H5写一个不就得了，说干就干直接动手开发一个简单的滚动字幕工具。

设计思路

滚动字幕工具理应涵盖两个部分：

功能设置区：在此区域内，用户能够对诸多关键参数进行设置。具体而言，可设定待播放的字幕内容，精确把控滚动速度，灵活调整滚动方向，随心选择背景颜色与滚动文字的颜色，还能按需确定文字的字体大小。同时，该区域配备播放按钮与全屏按钮，以满足用户不同的操作需求。值得一提的是，当用户开启全屏模式后，系统将考虑监听 ESC 键，以便用户能便捷地退出全屏状态。

字幕播放区：一旦启动播放程序，屏幕将以全屏模式展示滚动文字。这些文字遵循预先在功能设置区所设定的方向和速度进行滚动。在播放过程中，功能设置区将自动隐匿。

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动字幕投屏工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-color: #000;
            overflow: hidden;
            font-family: "Microsoft YaHei", sans-serif;
        }
        /* 滚动字幕容器 */
        .scroll-container {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
        .scroll-text {
            white-space: nowrap;
            font-size: 60px;
            color: #fff;
            padding: 20px;
            animation: scroll 20s linear infinite;
        }
        /* 控制面板样式 */
        .control-panel {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 10px;
            color: white;
            width: 90%;
            max-width: 1000px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            align-items: center;
            z-index: 100;
        }
        .control-group {
            flex: 1;
            min-width: 150px;
        }
		.max {
		    min-width: 960px;
		}
        label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        input, select, button {
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        #fullscreen-btn {
            background-color: #2196F3;
        }
        #fullscreen-btn:hover {
            background-color: #0b7dda;
        }
        
        /* 滚动动画 */
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        @keyframes scrollRight {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        @keyframes scrollUp {
            0% { transform: translateY(100vh); }
            100% { transform: translateY(-100%); }
        }
        @keyframes scrollDown {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-text" id="scrollText">请输入滚动文字内容...</div>
    </div>

    <div class="control-panel">
        <div class="control-group max">
            <label for="text-input">滚动文字内容</label>
            <input type="text" id="text-input" placeholder="输入要滚动的文字">
        </div>
        <div class="control-group">
            <label for="font-size">字体大小 (px)</label>
            <input type="number" id="font-size" value="60" min="10" max="200">
        </div>
        <div class="control-group">
            <label for="text-color">文字颜色</label>
            <input type="color" id="text-color" value="#ffffff">
        </div>
        <div class="control-group">
            <label for="bg-color">背景颜色</label>
            <input type="color" id="bg-color" value="#000000">
        </div>
        <div class="control-group">
            <label for="scroll-speed">滚动速度 (秒)</label>
            <input type="number" id="scroll-speed" value="10" min="5" max="60">
        </div>
        <div class="control-group">
            <label for="scroll-direction">滚动方向</label>
            <select id="scroll-direction">
                <option value="left">向左滚动</option>
                <option value="right">向右滚动</option>
                <option value="up">向上滚动</option>
                <option value="down">向下滚动</option>
            </select>
        </div>
        <div class="control-group">
            <button id="update-btn">更新字幕</button>
        </div>
        <div class="control-group">
            <button id="fullscreen-btn">全屏显示</button>
        </div>
    </div>


    <script>
        // 获取DOM元素
        const scrollText = document.getElementById('scrollText');
        const textInput = document.getElementById('text-input');
        const fontSize = document.getElementById('font-size');
        const textColor = document.getElementById('text-color');
        const bgColor = document.getElementById('bg-color');
        const scrollSpeed = document.getElementById('scroll-speed');
        const scrollDirection = document.getElementById('scroll-direction');
        const updateBtn = document.getElementById('update-btn');
        const fullscreenBtn = document.getElementById('fullscreen-btn');
        const closeModal = document.getElementById('close-modal');
        const body = document.body;

        // 更新字幕函数
        function updateScrollText() {
            // 更新文字内容
            if (textInput.value) {
                scrollText.textContent = textInput.value;
            }
            
            // 更新字体大小
            scrollText.style.fontSize = `${fontSize.value}px`;
            
            // 更新文字颜色
            scrollText.style.color = textColor.value;
            
            // 更新背景颜色
            body.style.backgroundColor = bgColor.value;
            
            // 更新滚动速度和方向
            updateAnimation();
        }

        // 更新动画函数
        function updateAnimation() {
            // 清除现有动画
            scrollText.style.animation = 'none';
            
            // 强制重绘
            void scrollText.offsetWidth;
            
            // 设置新动画
            let animation;
            switch(scrollDirection.value) {
                case 'left':
                    animation = `scroll ${scrollSpeed.value}s linear infinite`;
                    scrollText.style.whiteSpace = 'nowrap';
                    scrollText.style.transform = 'none';
                    break;
                case 'right':
                    animation = `scrollRight ${scrollSpeed.value}s linear infinite`;
                    scrollText.style.whiteSpace = 'nowrap';
                    scrollText.style.transform = 'none';
                    break;
                case 'up':
                    animation = `scrollUp ${scrollSpeed.value}s linear infinite`;
                    scrollText.style.whiteSpace = 'normal';
                    scrollText.style.width = '100%';
                    scrollText.style.textAlign = 'center';
                    break;
                case 'down':
                    animation = `scrollDown ${scrollSpeed.value}s linear infinite`;
                    scrollText.style.whiteSpace = 'normal';
                    scrollText.style.width = '100%';
                    scrollText.style.textAlign = 'center';
                    break;
            }
            
            scrollText.style.animation = animation;
        }

        // 全屏显示函数
        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen().catch(err => {
                    alert(`无法进入全屏模式: ${err.message}`);
                });
                // 全屏时隐藏控制面板
                document.querySelector('.control-panel').style.display = 'none';
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    // 退出全屏时显示控制面板
                    document.querySelector('.control-panel').style.display = 'flex';
                }
            }
        }

        // 事件监听
        updateBtn.addEventListener('click', updateScrollText);
        fullscreenBtn.addEventListener('click', toggleFullScreen);

        // 初始化
        updateScrollText();
    </script>
</body>
</html>

运行效果

把 HTML5 网页编辑好之后，直接发给我朋友了，让他拷贝到触屏电脑上去运行。朋友用了之后觉得挺不错的。可没过一会儿，他微信找我：“全屏之后字幕就一直播，我不想播了想退出来，咋都退不出来。”我一细问才知道，他那触屏电脑没有实体按键，全屏之后软键盘也调不出来，按不了 ESC 键，没办法退出全屏，也没办法看到浏览器的关闭按钮，尴尬了。然后我优化下，加上监听双击事件，双击触摸屏退出全屏。

星驰编程网

免费编程资源分享平台_编程教程_代码示例_开发技术文章

从零开始打造 —— 用 HTML5 打造安全实用的滚动字幕工具

设计思路

示例代码

运行效果