前言

这段代码会在用户切换到其他标签页或最小化浏览器窗口时,开始滚动显示当前页面标题。当用户切换回当前标签页时,停止滚动并恢复为原始页面标题

注意:此代码要放在 <head> </head> 标签之间

具体代码

<script type="text/javascript">
  (function() {
    'use strict';

    var originalTitle = document.title; // 存储原始标题
    var scrollTimer; // 滚动计时器
    var isPageActive = true; // 页面活动状态

    function linhutTitle() {
      document.title = document.title.substr(1) + document.title.charAt(0); // 将标题向左滚动一位
    }

    function startLinhut() {
      stopScroll(); // 停止之前的滚动计时器,避免多个计时器同时运行
      scrollTimer = setInterval(linhutTitle, 500); // 每500毫秒滚动一次标题
    }

    function stopScroll() {
      clearInterval(scrollTimer); // 停止滚动计时器
      document.title = originalTitle; // 恢复原始标题
    }

    function handleVisibilityChange() {
      if (document.hidden) { // 当用户离开当前标签页时
        startLinhut(); // 启动滚动标题的计时器
        isPageActive = false; // 将页面活动状态设置为false
      } else {
        if (!isPageActive) { // 当用户返回当前标签页时,并且之前页面状态为非活动状态
          stopScroll(); // 停止滚动标题的计时器,并恢复原始标题
        }
        isPageActive = true; // 将页面活动状态设置为true
      }
    }

    document.addEventListener("visibilitychange", handleVisibilityChange); // 监听页面可见性变化事件
  })();
</script>

代码介绍

在这个代码示例中,我们首先定义了原始标题 originalTitle 和存储滚动标题计时器 linhutTimer。然后,我们使用一个布尔变量 isPageActive 来跟踪页面的活动状态,默认为TRUE。
handleVisibilityChange 函数中,当用户离开当前标签页时,我们启动滚动计时器,并将 isPageActive 设置为 false。当用户返回当前标签页时,我们首先检查 isPageActive 是否为 false,如果是,则停止滚动并恢复原始标题,并将 isPageActive 设置为 true
通过在 window 对象上监听 "load" 事件,并在事件处理程序中调用 startLinhut 函数,确保页面加载完全后才开始滚动标题

通过这样的实现,当用户切换到其他标签页或最小化浏览器窗口时,页面标题会开始慢速滚动显示。当用户切换回当前标签页时,滚动停止,并恢复为原始页面标题。