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

Question

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

  <title>Welcome to Some title</title>

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

原文由 raghul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

});

原文由 Monica Bohanon 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 user3651562 发布，翻译遵循 CC BY-SA 3.0 许可协议