前言
这段代码会在用户切换到其他标签页或最小化浏览器窗口时,开始滚动显示当前页面标题。当用户切换回当前标签页时,停止滚动并恢复为原始页面标题
注意:此代码要放在
<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
函数,确保页面加载完全后才开始滚动标题
通过这样的实现,当用户切换到其他标签页或最小化浏览器窗口时,页面标题会开始慢速滚动显示。当用户切换回当前标签页时,滚动停止,并恢复为原始页面标题。
评论