如何在标题中显示滚动（移动）消息？
<title>Welcome to Some title</title>
将标题栏转换为动态，使用 JavaScript（不使用任何 CSS）显示附加信息。
【问题讨论】：
marquee tag
标签： javascript html
这是一个引人注目的示例，当您的网页标签在浏览器中未处于活动状态时（onblur），可以让您的访问者返回。 This script will animate the original title text with an intro, the original title text is restored when the tab is returned to active state (focus).单击选项卡时，将恢复原始页面标题。对于社交媒体共享，强烈建议将原始页面标题文本与前置动画文本 (onblur) 结合起来。
$(function() {
var origTitle, animatedTitle, timer;
function animateTitle(newTitle) {
var currentState = false;
origTitle = document.title; // save original title
animatedTitle = "Hey There! " + origTitle;
timer = setInterval(startAnimation, 2000);
function startAnimation() {
// animate between the original and the new title
document.title = currentState ? origTitle : animatedTitle;
currentState = !currentState;
}
}
function restoreTitle() {
clearInterval(timer);
document.title = origTitle; // restore original title
}
// Change page title on blur
$(window).blur(function() {
animateTitle();
});
// Change page title back on focus
$(window).focus(function() {
restoreTitle();
});
});
您可以通过 JavaScript 在标题栏文本中添加标记。在博文中查看 Add Scrolling Marquee Effects Text to Title Bar。
该页面的未修改内容，格式除外：
/*
Now you can add moving text to title bar of browser for your website or blog.
Here is the code to do this. Add this code in your website or blog in a widget
(after replacing YOUR TEXT with your desired text).
*/
<script language=javascript>
var rev = "fwd";
function titlebar(val){
var msg = "YOUR TEXT";
var res = " ";
var speed = 100;
var pos = val;
msg = " |-"+msg+"-|";
var le = msg.length;
if(rev == "fwd"){
if(pos < le){
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
else {
if(pos > 0) {
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);
}
else {
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);
}
}
}
titlebar(0);
</script>
【讨论】：
这是另一个。不过只能往前走…… 要使用：链接到文件并编写这行代码
var title = new MovingTitle("Desired title... ", 300, 10);
title.init();
第一个参数是想要的文字，下一个是更新间隔，10是可见字母的个数……
function MovingTitle(writeText, interval, visibleLetters) {
var _instance = {};
var _currId = 0;
var _numberOfLetters = writeText.length;
function updateTitle() {
_currId += 1;
if(_currId > _numberOfLetters - 1) {
_currId = 0;
}
var startId = _currId;
var endId = startId + visibleLetters;
var finalText;
if(endId < _numberOfLetters - 1) {
finalText = writeText.substring(startId, endId);
} else {
var cappedEndId = _numberOfLetters;
endId = endId - cappedEndId;
finalText = writeText.substring(startId, cappedEndId) + writeText.substring(0, endId);
}
document.title = finalText;
}
_instance.init = function() {
setInterval(updateTitle, interval);
};
return _instance;
}
【讨论】：
这是我的：
function animateTitle(Title = "Hello, World!", delay = 300) {
let counter = 0;
let direction = true;
aniTitle = setInterval(function () {
if (counter == Title.length)
direction = false;
if (counter == false)
direction = true;
counter = (direction == true) ? ++counter : --counter;
newtitle = (counter == 0) ? "" : Title.slice(0, counter);
document.title = newtitle;
}, delay)
}
【讨论】：