标题栏title文字滚动（窗口聚焦和失焦）

紫微前端

于 2021-06-03 15:31:50 发布

阅读量615

点赞数 2

CC 4.0 BY-SA版权

分类专栏：常用代码片段

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/117524389

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文介绍了如何在网页中实现标题栏文字的滚动效果，包括窗口聚焦和失焦时的不同表现。通过JavaScript和CSS，你可以创建动态且吸引人的标题滚动动画，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var blurTimer = "";
        var focusTimer = "";
        document.title = "萧瑟秋风今又是，换了人间--萧瑟秋风今又是，换了人间--"

        function blurTitleScroll() {
            if (blurTimer) {
                clearInterval(blurTimer)
            }
            if (focusTimer) {
                clearInterval(focusTimer)
            }
            focusTimer = setInterval(() => {
                var title = document.title;
                var arr = title.split('');
                arr.push(arr.shift())
                document.title = arr.join('')
            }, 300);
        }
        blurTitleScroll()
        window.addEventListener('blur', funct

了解本专栏