如何使用 JavaScript 使标题标签内的文本具有动画效果？

How do I make text inside the title tag animate using JavaScript?

提问by raghul

How do I show a scrolling (moving) message in the title?

如何在标题中显示滚动（移动）消息？

 <title>Welcome to Some title</title>

Translate the titlebar into a dynamic that displays additional information using JavaScript (without any CSS).

使用 JavaScript（不带任何 CSS）将标题栏转换为动态显示附加信息。

回答by user3651562

You can add marque in the title bar text through JavaScript. See it in the blog post Add Scrolling Marquee Effects Text to Title Bar.

您可以通过 JavaScript 在标题栏文本中添加标记。请参阅博客文章将滚动字幕效果文本添加到标题栏。

The unmodified contents of that page, except for the formatting:

该页面未修改的内容，除了格式：

/*
    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>

回答by Monica Bohanon

Here's an eye catching example to get your visitors back when your web page tab is not active within the browser (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). When the tab is clicked the original page title is restored. For social media sharing it is highly recommended to include the original page title text with the prefaced animated text (onblur).

这是一个引人注目的示例，当您的网页选项卡在浏览器中未处于活动状态时（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();
});

});

回答by Kasper B?ttcher

Here's another one. Only goes forward though... To use: Link to the file and write this line of code

这是另一个。只是继续前进......使用：链接到文件并编写这行代码

var title = new MovingTitle("Desired title... ", 300, 10);
title.init();

First parameter is the desired text, next one is the update interval, 10 is the number of visible letters...

第一个参数是需要的文本，下一个是更新间隔，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;
}